tailwindcss写出微博首页的head

以下是使用Tailwind CSS编写的微博首页的头部代码示例：

<header class="flex items-center justify-between px-4 py-3 bg-white border-b border-gray-300">
  <div class="flex items-center">
    <a href="#" class="text-2xl font-bold text-pink-600">微博</a>
    <nav class="ml-4">
      <a href="#" class="mr-4 text-gray-600 hover:text-gray-800">首页</a>
      <a href="#" class="mr-4 text-gray-600 hover:text-gray-800">热门</a>
      <a href="#" class="text-gray-600 hover:text-gray-800">发现</a>
    </nav>
  </div>
  <form action="#" method="POST" class="flex items-center">
    <input type="text" name="search" placeholder="搜索微博" class="px-4 py-2 text-gray-700 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none focus:bg-white focus:border-pink-600">
    <button type="submit" class="px-4 py-2 ml-4 text-white bg-pink-600 rounded-lg hover:bg-pink-700 focus:outline-none focus:bg-pink-700">搜索</button>
  </form>
</header>

解析：

- `flex items-center justify-between` 将头部分为两个部分，左边是微博的Logo和导航栏，右边是搜索框和按钮。
- `text-pink-600` 将微博Logo改为粉红色。
- `ml-4` 给导航栏添加左外边距，与Logo分开。
- `text-gray-600 hover:text-gray-800` 给导航栏链接添加默认和鼠标悬停状态下的颜色。
- `px-4 py-2 text-gray-700 bg-gray-100 border border-gray-300 rounded-lg focus:outline-none focus:bg-white focus:border-pink-600` 设定搜索框的样式，包括填充、文字颜色、背景色、边框颜色、圆角和焦点状态下的样式。
- `px-4 py-2 ml-4 text-white bg-pink-600 rounded-lg hover:bg-pink-700 focus:outline-none focus:bg-pink-700` 设定搜索按钮的样式，包括填充、文字颜色、背景色、圆角、鼠标悬停和焦点状态下的样式。