Tailwind Search

使用绝对路径

search

<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">

<div class="container mx-auto my-12 p-12 bg-gray-100">
  <div class="relative my-2 mr-6">
    <input type="search" class="p-3 w-full border-0 rounded shadow" placeholder="请输入搜索关键词" />
    <div class="absolute top-0 right-0 mt-3 mr-4 text-gray-400">
      <i class="fa fa-search"></i>
    </div>
  </div>
</div>

使用绝对路径和弹性盒子

search

<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">

<div class="container mx-auto my-12 p-12 bg-gray-100">
  <div class="relative my-2 w-full flex flex-wrap items-stretch">
    <input type="search" class="relateive p-3 w-full border-0 rounded shadow bg-white outline-none text-sm text-gray-700 placeholder-gray-400 focus:outline-none focus:shadow-outline" placeholder="请输入搜索关键词" />
    <div class="absolute top-0 right-0 pr-3 h-full leading-snug bg-transparent text-base font-normal text-gray-400 flex items-center justify-center">
      <i class="fa fa-search"></i>
    </div>
  </div>
</div>

左侧搜索按钮图标

search

<div class="mb-8 px-6 py-3 border border-gray-200 border-opacity-75 rounded-lg shadow-lg w-full space-x-6 flex items-center">
    <button class="focus:outline-none"><i class="fa fa-search text-gray-500"></i></button>
    <input type="search" class="w-full bg-transparent text-base focus:outline-none" placeholder="请输入搜索关键字">
</div>

搜索与列表

search list

<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">

<div class="container mx-auto flex flex-col items-center justify-center my-12 p-12 bg-white text-gray-900 antialiased">
  
  <div class="mb-8 px-6 py-3 border border-gray-200 border-opacity-75 rounded-lg shadow-lg w-full space-x-6 flex items-center">
    <button class="focus:outline-none"><i class="fa fa-search text-gray-500"></i></button>
    <input type="search" class="w-full bg-transparent text-base focus:outline-none" placeholder="请输入搜索关键字">
  </div>
  
  <div class="flex flex-col mb-8 divide-y text-base text-gray-800 w-full border">
    <div class="py-3 px-6">
      <div class="flex items-center justify-between">
        <h4 class="font-bold">主题文本</h4>
        <i class="fa fa-angle-down text-gray-500"></i>
      </div>
      <div class="mt-3 text-gray-600">详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容</div>
    </div>
    <div class="py-3 px-6">
      <div class="flex items-center justify-between">
        <h4 class="font-bold">主题文本</h4>
        <i class="fa fa-angle-down text-gray-500"></i>
      </div>
      <div class="mt-3 text-gray-600 hidden">详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容详细内容</div>
    </div>
  </div>
</div>