效果展示

直接上代码

 <div class="bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500">
                <div class="rounded-lg flex flex-row items-center justify-center h-20 ">
                    <span class=" basis-1/5 text-lg text-center inline-block">菜单</span>    
                    <span class=" grow  text-lg text-center">中心</span>
                    <span class="rounded-lg basis-1/6 text-lg text-center bg-white">个人中心</span>
 </div>