پیشنمایش زنده
کد HTML
<div class="group cursor-pointer hover:skew-x-6 hover:-skew-y-6 hover:duration-500 duration-500 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 y="0" xmlns="http://www.w3.org/2000/svg" x="0" width="100" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" height="100" class="w-4 h-4 stroke-current">
<path stroke-width="8" stroke-linejoin="round" stroke-linecap="round" fill="none" 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">
</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
}
.hover\:-skew-y-6:hover {
--tw-skew-y: -6deg;
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\:skew-x-6:hover {
--tw-skew-x: 6deg;
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
}
.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))
}