پیشنمایش زنده
کد HTML
<div
class="flex flex-col gap-2 dark:text-white max-w-md w-full bg-white dark:bg-neutral-900 p-5 rounded-md mt-8 shadow-md hover:scale-105 hover:duration-150 duration-150"
>
<div class="flex flex-row justify-between w-full">
<div class="flex flex-row justify-between w-full">
<div
class="bg-gray-200 dark:bg-neutral-700 rounded-md w-20 h-4 animate-pulse"
></div>
<div
class="bg-gray-200 dark:bg-neutral-700 rounded-md w-10 animate-pulse"
></div>
</div>
</div>
<div class="flex flex-row justify-between w-full">
<div
class="bg-gray-200 dark:bg-neutral-700 rounded-md w-40 animate-pulse"
></div>
<div class="text-xs">
<div class="flex flex-row">
<svg
fill="currentColor"
viewBox="0 0 20 20"
class="h-4 w-4 text-yellow-400"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z"
></path>
</svg>
<svg
fill="currentColor"
viewBox="0 0 20 20"
class="h-4 w-4 text-yellow-400"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z"
></path>
</svg>
<svg
fill="currentColor"
viewBox="0 0 20 20"
class="h-4 w-4 text-yellow-400"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z"
></path>
</svg>
<svg
fill="currentColor"
viewBox="0 0 20 20"
class="h-4 w-4 text-yellow-400"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z"
></path>
</svg>
<svg
fill="currentColor"
viewBox="0 0 20 20"
class="h-4 w-4 text-yellow-200"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M9.049 2.927c.3-.916 1.603-.916 1.902 0l1.286 3.953a1.5 1.5 0 001.421 1.033h4.171c.949 0 1.341 1.154.577 1.715l-3.38 2.458a1.5 1.5 0 00-.54 1.659l1.286 3.953c.3.916-.757 1.67-1.539 1.145l-3.38-2.458a1.5 1.5 0 00-1.76 0l-3.38 2.458c-.782.525-1.838-.229-1.539-1.145l1.286-3.953a1.5 1.5 0 00-.54-1.659l-3.38-2.458c-.764-.561-.372-1.715.577-1.715h4.171a1.5 1.5 0 001.421-1.033l1.286-3.953z"
></path>
</svg>
</div>
</div>
</div>
<div
class="bg-gray-200 dark:bg-neutral-700 rounded-md w-full h-20 animate-pulse"
></div>
</div>
کد CSS
.mt-8 {
margin-top: 2rem;
}
.flex {
display: flex;
}
.h-20 {
height: 5rem;
}
.h-4 {
height: 1rem;
}
.w-10 {
width: 2.5rem;
}
.w-20 {
width: 5rem;
}
.w-4 {
width: 1rem;
}
.w-40 {
width: 10rem;
}
.w-full {
width: 100%;
}
.max-w-md {
max-width: 28rem;
}
@keyframes pulse {
50% {
opacity: 0.5;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.flex-row {
flex-direction: row;
}
.flex-col {
flex-direction: column;
}
.justify-between {
justify-content: space-between;
}
.gap-2 {
gap: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
.bg-gray-200 {
--tw-bg-opacity: 1;
background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.p-5 {
padding: 1.25rem;
}
.text-xs {
font-size: 0.75rem;
line-height: 1rem;
}
.text-yellow-200 {
--tw-text-opacity: 1;
color: rgb(254 240 138 / var(--tw-text-opacity));
}
.text-yellow-400 {
--tw-text-opacity: 1;
color: rgb(250 204 21 / var(--tw-text-opacity));
}
.shadow-md {
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color),
0 2px 4px -2px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.duration-150 {
transition-duration: 150ms;
}
.hover\:scale-105:hover {
--tw-scale-x: 1.05;
--tw-scale-y: 1.05;
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-150:hover {
transition-duration: 150ms;
}
@media (prefers-color-scheme: dark) {
.dark\:bg-neutral-700 {
--tw-bg-opacity: 1;
background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}
.dark\:bg-neutral-900 {
--tw-bg-opacity: 1;
background-color: rgb(23 23 23 / var(--tw-bg-opacity));
}
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
}