Tailwind Header

自适应页头

header

页头（header）由三部分构成分别是Logo区域、搜索区域、导航区域

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">
<!--header-->
<header class="p-4 pb-0 border-b shadow-lg bg-gray-100 md:flex md:items-center md:justify-between md:pb-4">
  <!--logo-->
  <div class="mb-4 flex items-center justify-between md:mb-0">
    <h1 class="leading-none text-2xl text-gray-darkest">
      <a href="@" class="no-underline text-gray-darkest hover:text-black">标题</a>
    </h1>
    <!--bar-->
    <a href="#" class="text-black md:hidden hover:text-orange">
      <i class="fa fa-2x fa-bars"></i>
    </a>
  </div>
  <!--search-->
  <form action="get" class="mb-4 w-full md:mb-0 md:w-1/4">
    <label for="search" class="hidden">搜索</label>
    <input type="text" class="p-2 border rounded-lg w-full bg-grey-lightest focus:border-orange focus:shadow-inner" placeholder="搜索"/>
    <button class="hidden">确定</button>
  </form>
  <!--nav-->
  <nav>
    <ul class="list-reset md:flex md:items-center">
      <li class="md:ml-4">
        <a href="#" class="block py-2 text-grey-darkest no-underline md:border-none md:p-0 hover:underline">菜单</a>
      </li>
      <li class="md:ml-4">
        <a href="#" class="block border-t py-2 no-underline text-grey-darkest hover:underline hover:text-black md:p-0 md:border-none">菜单</a>
      </li>
      <li class="md:ml-4">
        <a href="#" class="block border-t py-2 no-underline text-grey-darkest hover:underline hover:text-black md:p-0 md:border-none">菜单</a>
      </li>
    </ul>
  </nav>
</header>

源码效果查看

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