Input by Jules-gitclerc
#e8e8e8
HTML +TailwindCSS
1<div 2 class="flex items-center justify-center bg-gray-800 overflow-hidden p-1 border border-white border-opacity-30 rounded-lg shadow-md h-9" 3> 4 <input 5 class="w-42 h-full border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2" 6 type="text" 7 name="text" 8 id="input" 9 placeholder="0000 0000 0000 0000" 10 /> 11 <div 12 class="flex items-center justify-center relative w-10 h-6 bg-gray-800 border border-white border-opacity-20 rounded-md" 13 > 14 <svg 15 class="text-white fill-current" 16 xmlns="http://www.w3.org/2000/svg" 17 width="23" 18 height="23" 19 viewBox="0 0 48 48" 20 > 21 <path 22 fill="#ff9800" 23 d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z" 24 ></path> 25 <path 26 fill="#d50000" 27 d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z" 28 ></path> 29 <path 30 fill="#ff3d00" 31 d="M18,24c0,4.755,2.376,8.95,6,11.48c3.624-2.53,6-6.725,6-11.48s-2.376-8.95-6-11.48 C20.376,15.05,18,19.245,18,24z" 32 ></path> 33 </svg> 34 </div> 35</div> 36
489 views
489 views
Variations
2333 views
MIT License