پیشنمایش زنده
کد HTML
<div
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"
>
<div class="flex flex-col gap-4">
<h2 class="text-xl">1 Canadian Dollar equals</h2>
<h1 class="text-6xl">0.74 United States Dollar</h1>
<p class="text-md">Mar 29, 6:02 p.m. UTC · Disclaimer</p>
</div>
<div class="flex-col flex py-4 gap-2.5">
<div
class="w-12/12 h-14 flex rounded-lg border-2 border-solid border-gray-100 items-center"
>
<input
placeholder="Enter the Amount in Numbers"
type="number"
class="w-9/12 h-14 px-4 bg-transparent focus:outline-none"
/>
<select
class="w-3/12 px-4 bg-transparent appearance-none border-l-2 border-gray-100 h-5/6 focus:outline-none text-lg"
>
<option>USD</option>
<option>INR</option>
<option>CAD</option>
</select>
</div>
<div class="m-0 p-0 h-0 flex items-center justify-start mx-2">
<button
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"
>
<svg
clip-rule="evenodd"
fill-rule="evenodd"
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"
class="fill-gray-100"
>
<path
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"
></path>
</svg>
</button>
</div>
<div
class="w-12/12 h-14 flex rounded-lg border-2 border-solid border-gray-100 items-center"
>
<input
readonly=""
placeholder="Converted Amount"
type="number"
class="w-9/12 h-14 px-4 bg-transparent focus:outline-none"
/>
<select
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"
>
<option>INR</option>
<option>USD</option>
<option>CAD</option>
</select>
</div>
</div>
<div class="flex flex-col items-center justify-center">
<button
type="submit"
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"
>
Convert
</button>
<span class="text-center text-xs text-gray-400 font-thin py-2"
><i>*make sure to click on the button for results</i></span
>
</div>
</div>
کد CSS
.absolute{position:absolute}.m-0{margin:0px}.mx-2{margin-left:0.5rem;margin-right:0.5rem}.flex{display:flex}.h-0{height:0px}.h-10{height:2.5rem}.h-12{height:3rem}.h-14{height:3.5rem}.h-5\/6{height:83.333333%}.w-10{width:2.5rem}.w-3\/12{width:25%}.w-9\/12{width:75%}.w-full{width:100%}.max-w-\[400px\]{max-width:400px}.appearance-none{-webkit-appearance:none;appearance:none}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-start{justify-content:flex-start}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.gap-2\.5{gap:0.625rem}.gap-4{gap:1rem}.rounded-3xl{border-radius:1.5rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:0.5rem}.border{border-width:1px}.border-2{border-width:2px}.border-l-2{border-left-width:2px}.border-solid{border-style:solid}.border-gray-100{--tw-border-opacity:1;border-color:rgb(243 244 246 / var(--tw-border-opacity))}.bg-gray-900{--tw-bg-opacity:1;background-color:rgb(17 24 39 / var(--tw-bg-opacity))}.bg-green-600{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity))}.bg-transparent{background-color:transparent}.bg-opacity-10{--tw-bg-opacity:0.1}.bg-opacity-30{--tw-bg-opacity:0.3}.bg-clip-padding{background-clip:padding-box}.fill-gray-100{fill:#f3f4f6}.p-0{padding:0px}.p-6{padding:1.5rem}.px-4{padding-left:1rem;padding-right:1rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-center{text-align:center}.text-6xl{font-size:3.75rem;line-height:1}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-xs{font-size:0.75rem;line-height:1rem}.font-thin{font-weight:100}.text-gray-100{--tw-text-opacity:1;color:rgb(243 244 246 / var(--tw-text-opacity))}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175 / var(--tw-text-opacity))}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.drop-shadow-lg{--tw-drop-shadow:drop-shadow(0 10px 8px rgb(0 0 0 / 0.04)) drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.backdrop-blur-lg{--tw-backdrop-blur:blur(16px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-blur-xl{--tw-backdrop-blur:blur(24px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.backdrop-filter{-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.hover\:scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:scale-95:hover{--tw-scale-x:.95;--tw-scale-y:.95;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.hover\:bg-green-600:hover{--tw-bg-opacity:1;background-color:rgb(22 163 74 / var(--tw-bg-opacity))}.focus\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}