Form by devkatyall
#212121
HTML +TailwindCSS
1<div 2 class="max-w-[400px] w-full rounded-3xl flex flex-col p-6 bg-green-600 bg-clip-padding backdrop-filter backdrop-blur-lg bg-opacity-30 border border-gray-100 text-gray-100 drop-shadow-lg" 3> 4 <div class="flex flex-col gap-4"> 5 <h2 class="text-xl">1 Canadian Dollar equals</h2> 6 <h1 class="text-6xl">0.74 United States Dollar</h1> 7 <p class="text-md">Mar 29, 6:02 p.m. UTC · Disclaimer</p> 8 </div> 9 <div class="flex-col flex py-4 gap-2.5"> 10 <div 11 class="w-12/12 h-14 flex rounded-lg border-2 border-solid border-gray-100 items-center" 12 > 13 <input 14 placeholder="Enter the Amount in Numbers" 15 type="number" 16 class="w-9/12 h-14 px-4 bg-transparent focus:outline-none" 17 /> 18 <select 19 class="w-3/12 px-4 bg-transparent appearance-none border-l-2 border-gray-100 h-5/6 focus:outline-none text-lg" 20 > 21 <option>USD</option> 22 <option>INR</option> 23 <option>CAD</option> 24 </select> 25 </div> 26 <div class="m-0 p-0 h-0 flex items-center justify-start mx-2"> 27 <button 28 class="absolute w-10 h-10 rounded-full bg-green-600 bg-clip-padding backdrop-filter border-2 border-gray-100 text-gray-100 drop-shadow-lg flex items-center justify-center hover:bg-green-600 hover:scale-105 transition-all duration-300" 29 > 30 <svg 31 clip-rule="evenodd" 32 fill-rule="evenodd" 33 xmlns="http://www.w3.org/2000/svg" 34 height="24" 35 width="24" 36 class="fill-gray-100" 37 > 38 <path 39 d="M21.67 3.955l-2.825-2.202.665-.753 4.478 3.497-4.474 3.503-.665-.753 2.942-2.292h-4.162c-3.547.043-5.202 3.405-6.913 7.023 1.711 3.617 3.366 6.979 6.913 7.022h4.099l-2.883-2.247.665-.753 4.478 3.497-4.474 3.503-.665-.753 2.884-2.247h-4.11c-3.896-.048-5.784-3.369-7.461-6.858-1.687 3.51-3.592 6.842-7.539 6.858h-2.623v-1h2.621c3.6-.014 5.268-3.387 6.988-7.022-1.72-3.636-3.388-7.009-6.988-7.023h-2.621v-1h2.623c3.947.016 5.852 3.348 7.539 6.858 1.677-3.489 3.565-6.81 7.461-6.858h4.047z" 40 ></path> 41 </svg> 42 </button> 43 </div> 44 <div 45 class="w-12/12 h-14 flex rounded-lg border-2 border-solid border-gray-100 items-center" 46 > 47 <input 48 readonly="" 49 placeholder="Converted Amount" 50 type="number" 51 class="w-9/12 h-14 px-4 bg-transparent focus:outline-none" 52 /> 53 <select 54 class="w-3/12 px-4 bg-transparent appearance-none border-l-2 border-gray-100 h-5/6 focus:outline-none text-lg transition-all duration-300" 55 > 56 <option>INR</option> 57 <option>USD</option> 58 <option>CAD</option> 59 </select> 60 </div> 61 </div> 62 <div class="flex flex-col items-center justify-center"> 63 <button 64 type="submit" 65 class="h-12 w-full bg-gray-900 rounded-full bg-clip-padding backdrop-filter backdrop-blur-xl bg-opacity-10 border border-gray-100 hover:bg-green-600 transition-all duration-300 hover:scale-95 text-xl shadow-md" 66 > 67 Convert 68 </button> 69 <span class="text-center text-xs text-gray-400 font-thin py-2" 70 ><i>*make sure to click on the button for results</i></span 71 > 72 </div> 73</div> 74
107 views
107 views
MIT License