Tailwind-CSS/searchBox.html at main · itschathura/Tailwind-CSS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="search-bar flex justify-center bg-gray-300 p-4 align-middle">
  <button class="button flex space-x-1 rounded-3xl bg-blue-300 p-3 px-4 shadow-md outline-none">
    <div class="pt-1">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5">
        <path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z" />
      </svg>
    </div>
    <input type="search" placeholder="Find your product" class="w-96 bg-blue-300 pl-2 text-lg outline-none placeholder:text-slate-100" />
    <div class="pt-1">
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="h-5 w-5 font-bold">
        <path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
      </svg>
    </div>
  </button>
</div>