پیشنمایش زنده
کد HTML
<div
class="h-[16em] w-[18em] border-2 border-[rgba(75,30,133,0.5)] rounded-[1.5em] bg-gradient-to-br from-[rgba(75,30,133,1)] to-[rgba(75,30,133,0.01)] text-white font-nunito p-[1em] flex justify-center items-left flex-col gap-[0.75em] backdrop-blur-[12px]"
>
<div>
<h1 class="text-[2em] font-medium">Heading</h1>
<p class="text-[0.85em]">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Vero dolorum
blanditiis pariatur sequi magni.
</p>
</div>
<button
class="h-fit w-fit px-[1em] py-[0.25em] border-[1px] rounded-full flex justify-center items-center gap-[0.5em] overflow-hidden group hover:translate-y-[0.125em] duration-200 backdrop-blur-[12px]"
>
<p>Button</p>
<svg
class="w-6 h-6 group-hover:translate-x-[10%] duration-300"
stroke="currentColor"
stroke-width="1"
viewBox="0 0 24 24"
fill="white"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
stroke-linejoin="round"
stroke-linecap="round"
></path>
</svg>
</button>
</div>
کد CSS
.flex{display:flex}.h-6{height:1.5rem}.h-\[16em\]{height:16em}.h-fit{height:-moz-fit-content;height:fit-content}.w-6{width:1.5rem}.w-\[18em\]{width:18em}.w-fit{width:-moz-fit-content;width:fit-content}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-\[0\.5em\]{gap:0.5em}.gap-\[0\.75em\]{gap:0.75em}.overflow-hidden{overflow:hidden}.rounded-\[1\.5em\]{border-radius:1.5em}.rounded-full{border-radius:9999px}.border-2{border-width:2px}.border-\[1px\]{border-width:1px}.border-\[rgba\(75\2c 30\2c 133\2c 0\.5\)\]{border-color:rgba(75,30,133,0.5)}.bg-gradient-to-br{background-image:linear-gradient(to bottom right, var(--tw-gradient-stops))}.from-\[rgba\(75\2c 30\2c 133\2c 1\)\]{--tw-gradient-from:rgba(75,30,133,1) var(--tw-gradient-from-position);--tw-gradient-to:rgba(75, 30, 133, 0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from), var(--tw-gradient-to)}.to-\[rgba\(75\2c 30\2c 133\2c 0\.01\)\]{--tw-gradient-to:rgba(75,30,133,0.01) var(--tw-gradient-to-position)}.p-\[1em\]{padding:1em}.px-\[1em\]{padding-left:1em;padding-right:1em}.py-\[0\.25em\]{padding-top:0.25em;padding-bottom:0.25em}.text-\[0\.85em\]{font-size:0.85em}.text-\[2em\]{font-size:2em}.font-medium{font-weight:500}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.backdrop-blur-\[12px\]{--tw-backdrop-blur:blur(12px);-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)}.duration-200{transition-duration:200ms}.duration-300{transition-duration:300ms}.hover\:translate-y-\[0\.125em\]:hover{--tw-translate-y:0.125em;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))}.group:hover .group-hover\:translate-x-\[10\%\]{--tw-translate-x:10%;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))}