Tailwind Navbar

导航栏

navbar

https://codepen.io/junchow/pen/WNrvLJR?editors=1000

PC导航栏仿Airbnb导航条

<div class="px-8 pt-2 mb-4 bg-white shadow-md">
    <nav class="flex flex-row justify-center -mb-px text-xs text-gray-500 font-bold">
      <a href="" class="mr-8 py-3 no-underline border-b-2 border-teal-500 tracking-wide text-teal-500">首页</a>
      <a href="" class="mr-8 py-3 no-underline border-b-2 border-transparent tracking-wide">分类</a>
      <a href="" class="mr-8 py-3 no-underline border-b-2 border-transparent tracking-wide">帮助</a>
    </nav>
</div>

PC导航条添加图标

<div class="px-8 pt-2 mb-4 bg-white shadow-md">
    <nav class="flex flex-row justify-center -mb-px text-xs text-gray-500 font-bold">
      <a href="" class="mr-8 py-3 no-underline border-b-2 border-teal-500 tracking-wide text-teal-500">
        <i class="fa fa-home"></i>
        <span>首页</span>
      </a>
      <a href="" class="mr-8 py-3 no-underline border-b-2 border-transparent tracking-wide">
        <i class="fa fa-bars"></i>
        <span>分类</span>
      </a>
      <a href="" class="mr-8 py-3 no-underline border-b-2 border-transparent tracking-wide">
        <i class="fa fa-user"></i>
        <span>会员</span>
      </a>
    </nav>
</div>

PC导航条上图下字

  <div class="px-8 pt-2 mb-4 bg-white shadow-md">
    <nav class="flex flex-row justify-center -mb-px text-xs text-gray-500 font-bold text-center">
      <a href="" class="mr-8 py-3 no-underline border-b-2 border-teal-500 tracking-wide text-teal-500 flex flex-col">
        <i class="fa fa-home fa-2x"></i>
        <span class="pt-1">首页</span>
      </a>
      <a href="" class="mr-8 py-3 no-underline border-b-2 border-transparent tracking-wide flex flex-col">
        <i class="fa fa-bars fa-2x"></i>
        <span class="pt-1">分类</span>
      </a>
      <a href="" class="mr-8 py-3 no-underline border-b-2 border-transparent tracking-wide flex flex-col">
        <i class="fa fa-user fa-2x"></i>
        <span class="pt-1">帮助</span>
      </a>
    </nav>
  </div>

移动端导航条

<div class="px-8 pt-2 mb-4 bg-white shadow-md">
    <nav class="flex flex-row justify-center -mb-px text-xs text-gray-500 font-bold text-center">
      <a href="" class="flex-1 mr-8 py-3 no-underline border-b-2 border-teal-500 tracking-wide text-teal-500 flex flex-col">
        <i class="fa fa-home fa-2x"></i>
        <span class="pt-1">首页</span>
      </a>
      <a href="" class="flex-1 mr-8 py-3 no-underline border-b-2 border-transparent tracking-wide flex flex-col">
        <i class="fa fa-bars fa-2x"></i>
        <span class="pt-1">分类</span>
      </a>
      <a href="" class="flex-1 mr-8 py-3 no-underline border-b-2 border-transparent tracking-wide flex flex-col">
        <i class="fa fa-user fa-2x"></i>
        <span class="pt-1">帮助</span>
      </a>
    </nav>
</div>