This post is saved as a draft.
#212121
HTML +TailwindCSS
1<form class="px-4 w-full max-w-[330px]"> 2 <label 3 class="mb-2 text-sm font-medium text-gray-900 sr-only dark:text-white" 4 for="default-search" 5 >Search</label 6 > 7 <div class="relative"> 8 <div 9 class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none" 10 > 11 <svg 12 viewBox="0 0 20 20" 13 fill="none" 14 xmlns="http://www.w3.org/2000/svg" 15 aria-hidden="true" 16 class="w-4 h-4 text-gray-500 dark:text-gray-400" 17 > 18 <path 19 d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" 20 stroke-width="2" 21 stroke-linejoin="round" 22 stroke-linecap="round" 23 stroke="currentColor" 24 ></path> 25 </svg> 26 </div> 27 <input 28 required="" 29 placeholder="Search" 30 class="block w-full p-4 py-5 ps-10 text-lg text-gray-900 border border-gray-300 rounded-lg bg-gray-50 focus:ring-blue-500 outline-none focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" 31 id="default-search" 32 type="search" 33 /> 34 <button 35 class="absolute end-2.5 bottom-1/2 translate-y-1/2 p-4 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800" 36 > 37 <svg 38 viewBox="0 0 20 20" 39 fill="none" 40 xmlns="http://www.w3.org/2000/svg" 41 aria-hidden="true" 42 class="w-4 h-4" 43 > 44 <path 45 d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z" 46 stroke-width="2" 47 stroke-linejoin="round" 48 stroke-linecap="round" 49 stroke="currentColor" 50 ></path> 51 </svg> 52 <span class="sr-only">Search</span> 53 </button> 54 </div> 55</form> 56
Variation of ainput
Variation of ainput