Input by ahmedyasserdev
#e8e8e8
HTML +TailwindCSS
1<form class="form relative"> 2 <button class="absolute left-2 -translate-y-1/2 top-1/2 p-1"> 3 <svg 4 width="17" 5 height="16" 6 fill="none" 7 xmlns="http://www.w3.org/2000/svg" 8 role="img" 9 aria-labelledby="search" 10 class="w-5 h-5 text-gray-700" 11 > 12 <path 13 d="M7.667 12.667A5.333 5.333 0 107.667 2a5.333 5.333 0 000 10.667zM14.334 14l-2.9-2.9" 14 stroke="currentColor" 15 stroke-width="1.333" 16 stroke-linecap="round" 17 stroke-linejoin="round" 18 ></path> 19 </svg> 20 </button> 21 <input 22 class="input rounded-full px-8 py-3 border-2 border-transparent focus:outline-none focus:border-blue-500 placeholder-gray-400 transition-all duration-300 shadow-md" 23 placeholder="Search..." 24 required="" 25 type="text" 26 /> 27 <button type="reset" class="absolute right-3 -translate-y-1/2 top-1/2 p-1"> 28 <svg 29 xmlns="http://www.w3.org/2000/svg" 30 class="w-5 h-5 text-gray-700" 31 fill="none" 32 viewBox="0 0 24 24" 33 stroke="currentColor" 34 > 35 <path 36 stroke-linecap="round" 37 stroke-linejoin="round" 38 d="M6 18L18 6M6 6l12 12" 39 ></path> 40 </svg> 41 </button> 42</form> 43
405 views
405 views
MIT License