Input by Jules-gitclerc
#e8e8e8
HTML +TailwindCSS
1<div 2 class="flex flex-col justify-around bg-gray-800 p-4 border border-white border-opacity-30 rounded-lg shadow-md max-w-xs mx-auto" 3> 4 <div class="flex flex-row items-center justify-between mb-3"> 5 <input 6 class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2 mb-3 flex-grow" 7 type="text" 8 name="cardName" 9 id="cardName" 10 placeholder="Full Name" 11 /> 12 <div 13 class="flex items-center justify-center relative w-14 h-9 bg-gray-800 border border-white border-opacity-20 rounded-md" 14 > 15 <svg 16 class="text-white fill-current" 17 xmlns="http://www.w3.org/2000/svg" 18 width="30" 19 height="30" 20 viewBox="0 0 48 48" 21 > 22 <path 23 fill="#ff9800" 24 d="M32 10A14 14 0 1 0 32 38A14 14 0 1 0 32 10Z" 25 ></path> 26 <path 27 fill="#d50000" 28 d="M16 10A14 14 0 1 0 16 38A14 14 0 1 0 16 10Z" 29 ></path> 30 <path 31 fill="#ff3d00" 32 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" 33 ></path> 34 </svg> 35 </div> 36 </div> 37 <div class="flex flex-col space-y-3"> 38 <input 39 class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2" 40 type="text" 41 name="cardNumber" 42 id="cardNumber" 43 placeholder="0000 0000 0000 0000" 44 /> 45 <div class="flex flex-row justify-between"> 46 <input 47 class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2" 48 type="text" 49 name="expiryDate" 50 id="expiryDate" 51 placeholder="MM/AA" 52 /> 53 <input 54 class="w-full h-10 border-none outline-none text-sm bg-gray-800 text-white font-semibold caret-orange-500 pl-2" 55 type="text" 56 name="cvv" 57 id="cvv" 58 placeholder="CVV" 59 /> 60 </div> 61 </div> 62</div> 63
779 views
779 views
MIT License