پیشنمایش زنده
کد HTML
<div class="group cursor-pointer group-hover:duration-500 overflow-hidden relative rounded-2xl shadow-inner shadow-gray-50 flex flex-col justify-around items-center w-40 h-80 bg-neutral-900 text-gray-50">
<div class="after:duration-500 before:duration-500 duration-500 group-hover:before:translate-x-11 group-hover:before:-translate-y-11 group-hover:after:translate-x-11 group-hover:after:translate-y-16 after:absolute after:w-12 after:h-12 after:bg-orange-400 after:rounded-full after:-z-10 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:-z-10 before:blur-xl before:top-20 before:right-16 before:w-12 before:h-12 flex flex-col font-extrabold text-6xl z-10">
<span>03</span>
<span>40</span>
</div>
<div class="flex flex-row justify-center text-sm font-thin items-center gap-1 font-thin">
<span>Touch to unlock</span>
<svg class="w-4 h-4 stroke-current" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
<path d="M33.9,46V29.9a16.1,16.1,0,0,1,32.2,0M50,62v8.1m-24.1,16H74.1a8,8,0,0,0,8-8V54a8,8,0,0,0-8-8H25.9a8,8,0,0,0-8,8V78.1A8,8,0,0,0,25.9,86.1Z" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="8">
</path>
</svg></div>
</div>
کد CSS
.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-4{height:1rem}.h-80{height:20rem}.w-4{width:1rem}.w-40{width:10rem}.cursor-pointer{cursor:pointer}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-around{justify-content:space-around}.gap-1{gap:0.25rem}.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))}.stroke-current{stroke:currentColor}.text-6xl{font-size:3.75rem;line-height:1}.text-sm{font-size:0.875rem;line-height:1.25rem}.font-extrabold{font-weight:800}.font-thin{font-weight:100}.text-gray-50{--tw-text-opacity:1;color:rgb(249 250 251 / var(--tw-text-opacity))}.shadow-inner{--tw-shadow:inset 0 2px 4px 0 rgb(0 0 0 / 0.05);--tw-shadow-colored:inset 0 2px 4px 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-gray-50{--tw-shadow-color:#f9fafb;--tw-shadow:var(--tw-shadow-colored)}.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\:-z-10::before{content:var(--tw-content);z-index:-10}.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\:-z-10::after{content:var(--tw-content);z-index:-10}.after\:h-12::after{content:var(--tw-content);height:3rem}.after\:w-12::after{content:var(--tw-content);width:3rem}.after\:rounded-full::after{content:var(--tw-content);border-radius:9999px}.after\:bg-orange-400::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(251 146 60 / 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}.group:hover .group-hover\:duration-500{transition-duration:500ms}.group:hover .group-hover\:before\:-translate-y-11::before{content:var(--tw-content);--tw-translate-y:-2.75rem;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\:before\:translate-x-11::before{content:var(--tw-content);--tw-translate-x:2.75rem;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\:after\:translate-x-11::after{content:var(--tw-content);--tw-translate-x:2.75rem;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\:after\:translate-y-16::after{content:var(--tw-content);--tw-translate-y:4rem;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))}