Tailwind Search

最新推荐文章于 2024-04-25 23:54:55 发布

JunChow520

最新推荐文章于 2024-04-25 23:54:55 发布

阅读量273

点赞数

本文链接：https://blog.csdn.net/JunChow520/article/details/106598922

版权

使用绝对路径

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

使用绝对路径和弹性盒子

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

左侧搜索按钮图标

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