پیشنمایش زنده
کد HTML
<div class="group relative overflow-hidden h-72 w-64 bg-sky-300 rounded-xl">
<div
class="absolute w-56 h-64 bg-gray-50 z-10 top-4 left-4 opacity-50 rounded-2xl blur duration-300 group-hover:blur-none [transform:rotate3d(1_,-1,_1,_30deg)] duration-500 group-hover:[transform:rotate3d(1_,-1,_1,_0deg)]"
></div>
<div
class="absolute w-56 h-64 z-10 top-4 left-4 p-3 rounded-2xl flex flex-col justify-end items-start gap-4 [transform:rotate3d(1_,-1,_1,_30deg)] duration-500 group-hover:[transform:rotate3d(1_,-1,_1,_0deg)]"
>
<span class="text-red-800 text-2xl font-extrabold">Card title</span>
<p class="text-gray-800 font-bold">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor.
</p>
<button
class="bg-gray-50 px-3 py-2 rounded-xl hover:bg-sky-600 duration-300"
>
See more
</button>
</div>
<svg
y="0"
xmlns="http://www.w3.org/2000/svg"
x="0"
width="100"
viewBox="0 0 10 10"
preserveAspectRatio="xMidYMid meet"
height="100"
class="fill-sky-400 w-64 h-64 absolute -bottom-20 -left-32"
>
<path
d="M0,5A5,5,0,1,0,5,0,5,5,0,0,0,0,5ZM8.12,5A3.12,3.12,0,1,1,5,1.88,3.12,3.12,0,0,1,8.12,5Z"
></path>
</svg>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.-bottom-20{bottom:-5rem}.-left-32{left:-8rem}.left-4{left:1rem}.top-4{top:1rem}.z-10{z-index:10}.flex{display:flex}.h-64{height:16rem}.h-72{height:18rem}.w-56{width:14rem}.w-64{width:16rem}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.justify-end{justify-content:flex-end}.gap-4{gap:1rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.rounded-xl{border-radius:0.75rem}.bg-gray-50{--tw-bg-opacity:1;background-color:rgb(249 250 251 / var(--tw-bg-opacity))}.bg-sky-300{--tw-bg-opacity:1;background-color:rgb(125 211 252 / var(--tw-bg-opacity))}.fill-sky-400{fill:#38bdf8}.p-3{padding:0.75rem}.px-3{padding-left:0.75rem;padding-right:0.75rem}.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-bold{font-weight:700}.font-extrabold{font-weight:800}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55 / var(--tw-text-opacity))}.text-red-800{--tw-text-opacity:1;color:rgb(153 27 27 / var(--tw-text-opacity))}.opacity-50{opacity:0.5}.blur{--tw-blur:blur(8px);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)}.duration-300{transition-duration:300ms}.duration-500{transition-duration:500ms}.\[transform\:rotate3d\(1_\2c -1\2c _1\2c _30deg\)\]{transform:rotate3d(1 ,-1, 1, 30deg)}.hover\:bg-sky-600:hover{--tw-bg-opacity:1;background-color:rgb(2 132 199 / var(--tw-bg-opacity))}.group:hover .group-hover\:blur-none{--tw-blur:blur(0);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)}.group:hover .group-hover\:\[transform\:rotate3d\(1_\2c -1\2c _1\2c _0deg\)\]{transform:rotate3d(1 ,-1, 1, 0deg)}