پیشنمایش زنده
کد HTML
<div
class="relative drop-shadow-xl w-48 h-64 overflow-hidden rounded-xl bg-[#3d3c3d]"
>
<div
class="absolute flex items-center justify-center text-white z-[1] opacity-90 rounded-xl inset-0.5 bg-[#323132]"
>
CARD
</div>
<div class="absolute w-56 h-48 bg-white blur-[50px] -left-1/2 -top-1/2"></div>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.inset-0{inset:0px}.inset-0\.5{inset:0.125rem}.-left-1\/2{left:-50%}.-top-1\/2{top:-50%}.z-\[1\]{z-index:1}.flex{display:flex}.h-48{height:12rem}.h-64{height:16rem}.w-48{width:12rem}.w-56{width:14rem}.items-center{align-items:center}.justify-center{justify-content:center}.overflow-hidden{overflow:hidden}.rounded-xl{border-radius:0.75rem}.bg-\[\#323132\]{--tw-bg-opacity:1;background-color:rgb(50 49 50 / var(--tw-bg-opacity))}.bg-\[\#3d3c3d\]{--tw-bg-opacity:1;background-color:rgb(61 60 61 / var(--tw-bg-opacity))}.bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255 / var(--tw-bg-opacity))}.text-white{--tw-text-opacity:1;color:rgb(255 255 255 / var(--tw-text-opacity))}.opacity-90{opacity:0.9}.blur-\[50px\]{--tw-blur:blur(50px);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)}.drop-shadow-xl{--tw-drop-shadow:drop-shadow(0 20px 13px rgb(0 0 0 / 0.03)) drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));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)}