پیشنمایش زنده
کد HTML
<div class="bg-sky-700 rounded-2xl shadow-sm shadow-sky-500">
<div class="group overflow-hidden relative after:duration-500 before:duration-500 duration-500 hover:after:duration-500 hover:after:translate-x-24 hover:before:translate-y-12 hover:before:-translate-x-32 hover:duration-500 after:absolute after:w-24 after:h-24 after:bg-sky-700 after:rounded-full after:blur-xl after:bottom-32 after:right-16 after:w-12 after:h-12 before:absolute before:w-20 before:h-20 before:bg-sky-400 before:rounded-full before:blur-xl before:top-20 before:right-16 before:w-12 before:h-12 hover:rotate-12 flex justify-center items-center h-56 w-80 origin-bottom-right bg-neutral-900 rounded-2xl outline outline-slate-400 -outline-offset-8">
<div class="z-10 flex flex-col items-center gap-2">
<span class="text-slate-400 text-6xl font-bold">JR </span>
<p class="text-gray-50">Frontend developer</p>
</div>
</div>
</div>
کد CSS
.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-56{height:14rem}.w-80{width:20rem}.origin-bottom-right{transform-origin:bottom right}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.gap-2{gap:0.5rem}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:1rem}.bg-neutral-900{--tw-bg-opacity:1;background-color:rgb(23 23 23 / var(--tw-bg-opacity))}.bg-sky-700{--tw-bg-opacity:1;background-color:rgb(3 105 161 / var(--tw-bg-opacity))}.text-6xl{font-size:3.75rem;line-height:1}.font-bold{font-weight:700}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.text-slate-400{--tw-text-opacity:1;color:rgb(148 163 184 / var(--tw-text-opacity))}.shadow-sm{--tw-shadow:0 1px 2px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.shadow-sky-500{--tw-shadow-color:#0ea5e9;--tw-shadow:var(--tw-shadow-colored)}.outline{outline-style:solid}.-outline-offset-8{outline-offset:-8px}.outline-slate-400{outline-color:#94a3b8}.duration-500{transition-duration:500ms}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:right-16::before{content:var(--tw-content);right:4rem}.before\:top-20::before{content:var(--tw-content);top:5rem}.before\:h-12::before{content:var(--tw-content);height:3rem}.before\:h-20::before{content:var(--tw-content);height:5rem}.before\:w-12::before{content:var(--tw-content);width:3rem}.before\:w-20::before{content:var(--tw-content);width:5rem}.before\:rounded-full::before{content:var(--tw-content);border-radius:9999px}.before\:bg-sky-400::before{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(56 189 248 / var(--tw-bg-opacity))}.before\:blur-xl::before{content:var(--tw-content);--tw-blur:blur(24px);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)}.before\:duration-500::before{content:var(--tw-content);transition-duration:500ms}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:bottom-32::after{content:var(--tw-content);bottom:8rem}.after\:right-16::after{content:var(--tw-content);right:4rem}.after\:h-12::after{content:var(--tw-content);height:3rem}.after\:h-24::after{content:var(--tw-content);height:6rem}.after\:w-12::after{content:var(--tw-content);width:3rem}.after\:w-24::after{content:var(--tw-content);width:6rem}.after\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\:bg-sky-700::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(3 105 161 / var(--tw-bg-opacity))}.after\:blur-xl::after{content:var(--tw-content);--tw-blur:blur(24px);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)}.after\:duration-500::after{content:var(--tw-content);transition-duration:500ms}.hover\:rotate-12:hover{--tw-rotate:12deg;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\:duration-500:hover{transition-duration:500ms}.hover\:before\:-translate-x-32:hover::before{content:var(--tw-content);--tw-translate-x:-8rem;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\:before\:translate-y-12:hover::before{content:var(--tw-content);--tw-translate-y:3rem;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\:after\:translate-x-24:hover::after{content:var(--tw-content);--tw-translate-x:6rem;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\:after\:duration-500:hover::after{content:var(--tw-content);transition-duration:500ms}