پیشنمایش زنده
کد HTML
<div class="group before:absolute before:bg-sky-500 before:w-3 before:h-12 before:top-24 before:-right-2 before:-z-10 before:rounded-2xl before:shadow-inner before:shadow-gray-50 relative w-60 h-60 bg-sky-500 shadow-inner shadow-gray-50 flex justify-center items-center rounded-3xl">
<div class="w-56 h-56 bg-neutral-900 shadow-inner shadow-gray-50 flex justify-center items-center rounded-3xl">
<div class="flex flex-col items-center justify-center rounded-2xl bg-neutral-900 shadow-inner shadow-gray-50 w-52 h-52">
<div class="group-hover:duration-300 hover:opacity-100 opacity-0 before:absolute before:w-12 before:h-12 before:bg-orange-800 before:rounded-full before:blur-xl before:top-16 relative flex flex-col justify-around items-center w-44 h-40 bg-neutral-900 text-gray-50">
<span class="">Wed, Sep 19</span>
<span class="z-10 flex items-center text-6xl text-amber-600 [text-shadow:_2px_2px_#fff,_1px_2px_#fff]">12<span class="text-xl font-bold text-gray-50 [text-shadow:none]">:</span>58</span>
<div class="text-gray-50 w-48 flex flex-row justify-evenly">
<span class="text-xs font-bold">89</span>
<div class="flex flex-row items-center">
<svg class="w-5 h-5 fill-red-500 animate-bounce" height="100" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100" width="100" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
<path class="" 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" fill-rule="evenodd">
</path>
</svg>
<svg class="w-5 h-5 fill-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 class="svg-fill-primary" d="M80.2,40.7l-1.1-2-.2-.3.3-.3c2.2-14.7-21.3-25.6-20.7-21S57,38.1,45.4,31.8c-9.3-5.1-12.9,12.1-22.8,33.7C16.2,79.4,20.8,82.3,27,81l.3.4L29,83.3a1.4,1.4,0,0,0,1.8.5l.9-.3a1.6,1.6,0,0,0,1.1-1.9l-.5-2.5a38.2,38.2,0,0,0,4.5-2.7L38.6,78a1.8,1.8,0,0,0,2.4-.1l1.2-1.1a1.9,1.9,0,0,0,.4-1.9l-1-2.5L45.5,69l1.7,1.6a1.8,1.8,0,0,0,2.4-.1l.9-1a1.7,1.7,0,0,0,.4-1.8L50,65c5.6-5,11.9-10.9,17.3-15.8l.4.2,1.9,1.1a1.6,1.6,0,0,0,2.1-.2l.8-.8a1.6,1.6,0,0,0,.3-2.1l-1.3-2.1,3.2-3.1,2.2,1.5a1.8,1.8,0,0,0,2.2-.1l.8-.8A1.7,1.7,0,0,0,80.2,40.7Z">
</path>
</svg>
<svg class="w-5 h-5 fill-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 class="svg-fill-primary" d="M59.5,20.5a3.9,3.9,0,0,0-2.5-2,4.3,4.3,0,0,0-3.3.5,11.9,11.9,0,0,0-3.2,3.5,26,26,0,0,0-2.3,4.4,76.2,76.2,0,0,0-3.3,10.8,120.4,120.4,0,0,0-2.4,14.2,11.4,11.4,0,0,1-3.8-4.2c-1.3-2.7-1.5-6.1-1.5-10.5a4,4,0,0,0-2.5-3.7,3.8,3.8,0,0,0-4.3.9,27.7,27.7,0,1,0,39.2,0,62.4,62.4,0,0,1-5.3-5.8A42.9,42.9,0,0,1,59.5,20.5ZM58.4,70.3a11.9,11.9,0,0,1-20.3-8.4s3.5,2,9.9,2c0-4,2-15.9,5-17.9a21.7,21.7,0,0,0,5.4,7.5,11.8,11.8,0,0,1,3.5,8.4A12,12,0,0,1,58.4,70.3Z" fill-rule="evenodd">
</path>
</svg>
</div>
</div>
</div>
<span class="text-gray-700 text-lg font-light">fitbit</span>
</div>
</div>
</div>
کد CSS
.relative {
position: relative
}
.z-10 {
z-index: 10
}
.flex {
display: flex
}
.h-40 {
height: 10rem
}
.h-5 {
height: 1.25rem
}
.h-52 {
height: 13rem
}
.h-56 {
height: 14rem
}
.h-60 {
height: 15rem
}
.w-44 {
width: 11rem
}
.w-48 {
width: 12rem
}
.w-5 {
width: 1.25rem
}
.w-52 {
width: 13rem
}
.w-56 {
width: 14rem
}
.w-60 {
width: 15rem
}
@keyframes bounce {
0%, 100% {
transform: translateY(-25%);
animation-timing-function: cubic-bezier(0.8,0,1,1)
}
50% {
transform: none;
animation-timing-function: cubic-bezier(0,0,0.2,1)
}
}
.animate-bounce {
animation: bounce 1s infinite
}
.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
}
.rounded-2xl {
border-radius: 1rem
}
.rounded-3xl {
border-radius: 1.5rem
}
.bg-neutral-900 {
--tw-bg-opacity: 1;
background-color: rgb(23 23 23 / var(--tw-bg-opacity))
}
.bg-sky-500 {
--tw-bg-opacity: 1;
background-color: rgb(14 165 233 / var(--tw-bg-opacity))
}
.fill-current {
fill: currentColor
}
.fill-red-500 {
fill: #ef4444
}
.text-6xl {
font-size: 3.75rem;
line-height: 1
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem
}
.font-bold {
font-weight: 700
}
.font-light {
font-weight: 300
}
.text-amber-600 {
--tw-text-opacity: 1;
color: rgb(217 119 6 / var(--tw-text-opacity))
}
.text-gray-50 {
--tw-text-opacity: 1;
color: rgb(249 250 251 / var(--tw-text-opacity))
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgb(55 65 81 / var(--tw-text-opacity))
}
.opacity-0 {
opacity: 0
}
.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)
}
.\[text-shadow\:_2px_2px_\#fff\2c _1px_2px_\#fff\] {
text-shadow: 2px 2px #fff, 1px 2px #fff
}
.\[text-shadow\:none\] {
text-shadow: none
}
.before\:absolute::before {
content: var(--tw-content);
position: absolute
}
.before\:-right-2::before {
content: var(--tw-content);
right: -0.5rem
}
.before\:top-16::before {
content: var(--tw-content);
top: 4rem
}
.before\:top-24::before {
content: var(--tw-content);
top: 6rem
}
.before\:-z-10::before {
content: var(--tw-content);
z-index: -10
}
.before\:h-12::before {
content: var(--tw-content);
height: 3rem
}
.before\:w-12::before {
content: var(--tw-content);
width: 3rem
}
.before\:w-3::before {
content: var(--tw-content);
width: 0.75rem
}
.before\:rounded-2xl::before {
content: var(--tw-content);
border-radius: 1rem
}
.before\:rounded-full::before {
content: var(--tw-content);
border-radius: 9999px
}
.before\:bg-orange-800::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(154 52 18 / var(--tw-bg-opacity))
}
.before\:bg-sky-500::before {
content: var(--tw-content);
--tw-bg-opacity: 1;
background-color: rgb(14 165 233 / var(--tw-bg-opacity))
}
.before\:shadow-inner::before {
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)
}
.before\:shadow-gray-50::before {
content: var(--tw-content);
--tw-shadow-color: #f9fafb;
--tw-shadow: var(--tw-shadow-colored)
}
.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)
}
.hover\:opacity-100:hover {
opacity: 1
}
.group:hover .group-hover\:duration-300 {
transition-duration: 300ms
}