Tailwind searchs

Responsive search built with Tailwind. Search is a special input that allows users to define a text field for entering a search string.


Basic example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!-- Required form plugin -->
<link href="https://cdn.jsdelivr.net/npm/@tailwindcss/custom-forms@0.2.1/dist/custom-forms.css" rel="stylesheet">
<!-- Required font awesome -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />

<!-- Small -->
<div class="relative flex w-full flex-wrap items-stretch mb-3">
  <span
    class="z-10 h-full leading-snug font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-2 py-1">
    <i class="fas fa-search"></i>
  </span>
  <input type="text" placeholder="Search"
    class="px-2 py-1 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:ring w-full pl-10" />
</div>

<!-- Medium -->
<div class="relative flex w-full flex-wrap items-stretch mb-3">
  <span
    class="z-10 h-full leading-snug font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-base items-center justify-center w-8 pl-3 py-3">
    <i class="fas fa-search"></i>
  </span>
  <input type="text" placeholder="Search"
    class="px-3 py-3 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-sm border border-gray-400 outline-none focus:outline-none focus:ring w-full pl-10" />
</div>

<!-- Large -->
<div class="relative flex w-full flex-wrap items-stretch mb-3">
  <span
    class="z-10 h-full leading-normal font-normal absolute text-center text-gray-400 absolute bg-transparent rounded text-lg items-center justify-center w-8 pl-3 py-4">
    <i class="fas fa-search"></i>
  </span>
  <input type="text" placeholder="Search"
    class="px-3 py-4 placeholder-gray-400 text-gray-600 relative bg-white bg-white rounded text-base border border-gray-400 outline-none focus:outline-none focus:ring w-full pl-10" />
</div>