پیشنمایش زنده
کد HTML
<div class="after:-z-20 after:absolute after:w-20 after:h-80 after:bg-sky-700 after:rounded-2xl after:shadow-inner after:shadow-slate-900 relative rounded-2xl shadow-inner shadow-gray-50 flex flex-col justify-evenly items-center w-28 h-48 bg-sky-700 text-gray-50 after:outline-double after:-outline-offset-8 after:outline-sky-800">
<div class="absolute w-24 h-44 bg-neutral-900 rounded-2xl flex flex-col justify-around items-center before:absolute before:w-8 before:h-8 before:bg-sky-400 before:rounded-full before:blur-xl before:top-16 before:right-6 before:w-12 before:h-12 outline-double -outline-offset-4 outline-sky-800">
<div class="flex flex-col font-extrabold text-6xl z-10">
<span>03</span>
<span>40</span>
</div>
<div class="flex flex-row justify-center items-center gap-1 font-thin">
<span>90</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-5 h-5 fill-red-500">
<path fill-rule="evenodd" d="M23,27.6a15.8,15.8,0,0,1,22.4,0L50,32.2l4.6-4.6A15.8,15.8,0,0,1,77,50L50,77,23,50A15.8,15.8,0,0,1,23,27.6Z" class="">
</path>
</svg>
</div>
</div>
</div>
کد CSS
.absolute{position:absolute}.relative{position:relative}.z-10{z-index:10}.flex{display:flex}.h-44{height:11rem}.h-48{height:12rem}.h-5{height:1.25rem}.w-24{width:6rem}.w-28{width:7rem}.w-5{width:1.25rem}.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}.justify-evenly{justify-content:space-evenly}.gap-1{gap:0.25rem}.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))}.fill-red-500{fill:#ef4444}.text-6xl{font-size:3.75rem;line-height:1}.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)}.outline-double{outline-style:double}.-outline-offset-4{outline-offset:-4px}.outline-sky-800{outline-color:#075985}.before\:absolute::before{content:var(--tw-content);position:absolute}.before\:right-6::before{content:var(--tw-content);right:1.5rem}.before\:top-16::before{content:var(--tw-content);top:4rem}.before\:h-12::before{content:var(--tw-content);height:3rem}.before\:h-8::before{content:var(--tw-content);height:2rem}.before\:w-12::before{content:var(--tw-content);width:3rem}.before\:w-8::before{content:var(--tw-content);width:2rem}.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)}.after\:absolute::after{content:var(--tw-content);position:absolute}.after\:-z-20::after{content:var(--tw-content);z-index:-20}.after\:h-80::after{content:var(--tw-content);height:20rem}.after\:w-20::after{content:var(--tw-content);width:5rem}.after\:rounded-2xl::after{content:var(--tw-content);border-radius:1rem}.after\:bg-sky-700::after{content:var(--tw-content);--tw-bg-opacity:1;background-color:rgb(3 105 161 / var(--tw-bg-opacity))}.after\:shadow-inner::after{content:var(--tw-content);--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)}.after\:shadow-slate-900::after{content:var(--tw-content);--tw-shadow-color:#0f172a;--tw-shadow:var(--tw-shadow-colored)}.after\:outline-double::after{content:var(--tw-content);outline-style:double}.after\:-outline-offset-8::after{content:var(--tw-content);outline-offset:-8px}.after\:outline-sky-800::after{content:var(--tw-content);outline-color:#075985}