پیشنمایش زنده
کد HTML
<div class="max-w-sm w-full mx-auto mt-5">
<div
class="animate-pulse flex space-x-4 border border-gray-300 shadow-lg p-4 rounded-lg"
>
<div class="rounded-full bg-gray-300 h-10 w-10"></div>
<div class="flex-1 space-y-6 py-1">
<div class="h-2 bg-gray-300 rounded"></div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="h-2 bg-gray-300 rounded col-span-2"></div>
<div class="h-2 bg-gray-300 rounded col-span-1"></div>
</div>
<div class="h-2 bg-gray-300 rounded"></div>
</div>
</div>
</div>
</div>
کد CSS
.col-span-1 {
grid-column: span 1 / span 1;
}
.col-span-2 {
grid-column: span 2 / span 2;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mt-5 {
margin-top: 1.25rem;
}
.flex {
display: flex;
}
.grid {
display: grid;
}
.h-10 {
height: 2.5rem;
}
.h-2 {
height: 0.5rem;
}
.w-10 {
width: 2.5rem;
}
.w-full {
width: 100%;
}
.max-w-sm {
max-width: 24rem;
}
.flex-1 {
flex: 1 1 0%;
}
@keyframes pulse {
50% {
opacity: 0.5;
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gap-4 {
gap: 1rem;
}
.space-x-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.rounded {
border-radius: 0.25rem;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-lg {
border-radius: 0.5rem;
}
.border {
border-width: 1px;
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),
0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}