پیشنمایش زنده
کد HTML
<div class="bg-sky-700 rounded-2xl shadow-sm shadow-sky-500 outline outline-slate-400 -outline-offset-8">
<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 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
}
.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
}