پیشنمایش زنده
کد HTML
<div
class="fitCard flex min-h-[24em] min-w-[18em] flex-col items-center justify-center gap-[0.5rem] rounded-[1.5em] bg-[#FFFACD] p-[0.5rem] font-monts text-[#B49A18]"
>
<div
class="flex h-[4em] w-full items-center justify-between rounded-[1.5em] bg-[#FFF599] p-[0.5rem]"
>
<svg
viewBox="0 0 48 48"
fill="none"
height="48"
width="48"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M37.99 38.293C37.785 34.785 34.733 32 31 32H17c-3.735 0-6.786 2.785-6.99 6.293m27.98 0A19.94 19.94 0 0 0 44 24c0-11.046-8.954-20-20-20S4 12.954 4 24a19.94 19.94 0 0 0 6.01 14.293m27.98 0A19.935 19.935 0 0 1 24 44a19.935 19.935 0 0 1-13.99-5.707M30 20a6 6 0 1 1-12 0 6 6 0 0 1 12 0Z"
stroke-width="2"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#B49A18"
></path>
</svg>
<p class="text-[1.25rem] font-semibold">Manpreet</p>
</div>
<div class="flex h-fit w-full items-center justify-center gap-[0.5em]">
<div
class="group relative flex h-[10em] w-[10em] items-center justify-center rounded-[1.5em] bg-[#FFF599] px-[0.5rem] pt-[1rem]"
>
<svg
class="absolute left-1/2 top-[calc(50%+8px)] h-[9rem] w-[9rem] -translate-x-1/2 -translate-y-1/2"
viewBox="0 0 160 160"
fill="none"
height="160"
width="160"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M130.912 130.912a71.997 71.997 0 0 0-10.911-110.778A71.999 71.999 0 0 0 9.383 94.046a72.004 72.004 0 0 0 19.705 36.866"
stroke-width="16"
stroke-linecap="round"
stroke="#EEDC82"
></path>
<path
d="M146.65 52.764A72.004 72.004 0 0 0 69.647 8.748a71.998 71.998 0 0 0-40.559 122.164"
class="duration-[1s] [stroke-dasharray:100] [stroke-dashoffset:-98] group-hover:[stroke-dashoffset:0]"
pathLength="100"
stroke-width="16"
stroke-linecap="round"
stroke="#B49A18"
></path>
</svg>
<p class="text-[0.75rem] font-semibold">1729/2500 Steps</p>
</div>
<div
class="flex h-[10em] flex-1 flex-col items-center justify-center gap-[0.5rem]"
>
<div
class="flex w-full flex-1 items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
>
<div
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[300%]"
>
<svg
viewBox="0 0 48 48"
fill="none"
height="48"
width="48"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m11 32 7-9 6 9 6-9 5 8h9"
stroke-width="4"
stroke-miterlimit="2"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#B49A18"
></path>
<path
d="M44 19c0-6.075-4.925-11-11-11-3.72 0-7.01 1.847-9 4.674A10.987 10.987 0 0 0 15 8C8.925 8 4 12.925 4 19c0 11 13 21 20 23.326 1.194-.397 2.562-1.016 4.01-1.826"
stroke-width="4"
stroke-linejoin="round"
stroke-linecap="round"
stroke="#B49A18"
></path>
</svg>
</div>
<p
class="absolute left-1/2 top-1/2 h-fit w-full -translate-x-1/2 translate-y-[150%] text-center text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
>
98 bpm
</p>
</div>
<div
class="flex w-full flex-1 items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
>
<div
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[300%]"
>
<svg
viewBox="0 0 48 48"
fill="none"
height="48"
width="48"
xmlns="http://www.w3.org/2000/svg"
>
<g clip-path="url(#a)">
<path
d="M47.32 28.378a1.776 1.776 0 0 0-1.98-.142c-2.977 1.71-6.122 2.578-9.35 2.578-10.37 0-18.807-8.437-18.807-18.808 0-3.242.869-6.383 2.582-9.336A1.775 1.775 0 0 0 17.738.073 24.833 24.833 0 0 0 5.04 8.7C1.743 12.976 0 18.096 0 23.508c0 13.503 10.985 24.489 24.488 24.489 5.412 0 10.533-1.742 14.81-5.04a24.817 24.817 0 0 0 8.632-12.69 1.774 1.774 0 0 0-.61-1.889ZM24.488 44.446c-11.545 0-20.937-9.393-20.937-20.938 0-7.788 4.457-14.876 11.23-18.438a21.423 21.423 0 0 0-1.149 6.936c0 12.329 10.03 22.36 22.358 22.36a21.49 21.49 0 0 0 6.948-1.154c-3.561 6.775-10.655 11.233-18.45 11.233Z"
fill="#B49A18"
></path>
</g>
<defs>
<clipPath id="a">
<path d="M0 0h48v48H0z" fill="#fff"></path>
</clipPath>
</defs>
</svg>
</div>
<p
class="absolute left-1/2 top-1/2 h-fit w-full -translate-x-1/2 translate-y-[150%] text-center text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
>
7.5 hrs
</p>
</div>
</div>
</div>
<div
class="flex h-[4.5rem] w-full flex-row items-center justify-center gap-[0.5rem]"
>
<div
class="flex h-full w-[10rem] items-center justify-center rounded-[1.5rem] bg-[#FFF599] group relative overflow-hidden"
>
<div
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[300%]"
>
<svg
viewBox="0 0 48 48"
fill="none"
height="48"
width="48"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M24 44c11.046 0 20-8.954 20-20S35.046 4 24 4 4 12.954 4 24s8.954 20 20 20Z"
stroke-width="3"
stroke-linecap="round"
stroke="#B49A18"
></path>
<path
d="M18.804 27a5.999 5.999 0 0 0 10.392 0"
stroke-width="3"
stroke-linecap="round"
stroke="#B49A18"
></path>
<path
d="M18 15.75h-2a2.25 2.25 0 0 0 0 4.5h2a2.25 2.25 0 0 0 0-4.5Zm14 0h-2a2.25 2.25 0 0 0 0 4.5h2a2.25 2.25 0 0 0 0-4.5Z"
stroke-width=".25"
stroke-linecap="round"
stroke="#B49A18"
fill="#B49A18"
></path>
</svg>
</div>
<p
class="absolute left-1/2 top-1/2 h-fit w-fit -translate-x-1/2 translate-y-[150%] text-left text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
>
Happy
</p>
</div>
<div
class="flex h-full w-[6.5rem] items-center justify-center rounded-[1.5rem] bg-[#FFF599] relative group overflow-hidden"
>
<div
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-300 group-hover:-translate-y-[250%]"
>
<svg
viewBox="0 0 48 52"
fill="none"
height="52"
width="48"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M32.87 18.07c0-2.808 3.734-3.553 4.725-.925 2.397 6.356 4.144 12.042 4.144 15.116 0 9.797-7.942 17.739-17.74 17.739-9.796 0-17.738-7.942-17.738-17.739 0-3.303 2.016-9.62 4.688-16.544 3.463-8.97 5.194-13.455 7.33-13.696a3.641 3.641 0 0 1 2.04.38c1.907.995 1.907 5.886 1.907 15.67a5.322 5.322 0 0 0 10.643 0Z"
stroke-width="3"
stroke="#B49A18"
></path>
<path
d="m20.452 50-.932-2.331a12.086 12.086 0 0 1 1.784-12.038 3.453 3.453 0 0 1 5.392 0 12.085 12.085 0 0 1 1.784 12.038l-.932 2.33"
stroke-width="3"
stroke="#B49A18"
></path>
</svg>
</div>
<p
class="absolute left-1/2 top-1/2 h-fit w-fit -translate-x-1/2 translate-y-[150%] text-left text-[1rem] font-bold duration-300 group-hover:-translate-y-1/2"
>
1240cal
</p>
</div>
</div>
<div
class="group relative flex h-[5em] w-full items-center justify-center overflow-hidden rounded-[1.5rem] bg-[#FFF599]"
>
<p
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[1rem] font-bold duration-500 group-hover:-translate-x-[250%]"
>
Today's Quote
</p>
<p
class="absolute left-1/2 top-1/2 h-fit w-full -translate-y-1/2 translate-x-1/2 px-[1rem] text-left text-[0.75rem] font-bold duration-500 group-hover:-translate-x-1/2 text-center"
>
“The real workout starts when you want to stop.” – Ronnie Coleman
</p>
</div>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.left-1\/2 {
left: 50%;
}
.top-1\/2 {
top: 50%;
}
.top-\[calc\(50\%\+8px\)\] {
top: calc(50% + 8px);
}
.flex {
display: flex;
}
.h-\[10em\] {
height: 10em;
}
.h-\[4\.5rem\] {
height: 4.5rem;
}
.h-\[4em\] {
height: 4em;
}
.h-\[5em\] {
height: 5em;
}
.h-\[9rem\] {
height: 9rem;
}
.h-fit {
height: -moz-fit-content;
height: fit-content;
}
.h-full {
height: 100%;
}
.min-h-\[24em\] {
min-height: 24em;
}
.w-\[10em\] {
width: 10em;
}
.w-\[10rem\] {
width: 10rem;
}
.w-\[6\.5rem\] {
width: 6.5rem;
}
.w-\[9rem\] {
width: 9rem;
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
.min-w-\[18em\] {
min-width: 18em;
}
.flex-1 {
flex: 1 1 0%;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
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));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
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));
}
.translate-x-1\/2 {
--tw-translate-x: 50%;
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));
}
.translate-y-\[150\%\] {
--tw-translate-y: 150%;
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));
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.gap-\[0\.5em\] {
gap: 0.5em;
}
.gap-\[0\.5rem\] {
gap: 0.5rem;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-\[1\.5em\] {
border-radius: 1.5em;
}
.rounded-\[1\.5rem\] {
border-radius: 1.5rem;
}
.bg-\[\#FFF599\] {
--tw-bg-opacity: 1;
background-color: rgb(255 245 153 / var(--tw-bg-opacity));
}
.bg-\[\#FFFACD\] {
--tw-bg-opacity: 1;
background-color: rgb(255 250 205 / var(--tw-bg-opacity));
}
.p-\[0\.5rem\] {
padding: 0.5rem;
}
.px-\[0\.5rem\] {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-\[1rem\] {
padding-left: 1rem;
padding-right: 1rem;
}
.pt-\[1rem\] {
padding-top: 1rem;
}
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
.text-\[0\.75rem\] {
font-size: 0.75rem;
}
.text-\[1\.25rem\] {
font-size: 1.25rem;
}
.text-\[1rem\] {
font-size: 1rem;
}
.font-bold {
font-weight: 700;
}
.font-semibold {
font-weight: 600;
}
.text-\[\#B49A18\] {
--tw-text-opacity: 1;
color: rgb(180 154 24 / var(--tw-text-opacity));
}
.duration-300 {
transition-duration: 300ms;
}
.duration-500 {
transition-duration: 500ms;
}
.duration-\[1s\] {
transition-duration: 1s;
}
.\[stroke-dasharray\:100\] {
stroke-dasharray: 100;
}
.\[stroke-dashoffset\:-98\] {
stroke-dashoffset: -98;
}
.group:hover .group-hover\:-translate-x-1\/2 {
--tw-translate-x: -50%;
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\:-translate-x-\[250\%\] {
--tw-translate-x: -250%;
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\:-translate-y-1\/2 {
--tw-translate-y: -50%;
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\:-translate-y-\[250\%\] {
--tw-translate-y: -250%;
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\:-translate-y-\[300\%\] {
--tw-translate-y: -300%;
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\:\[stroke-dashoffset\:0\] {
stroke-dashoffset: 0;
}