پیشنمایش زنده
کد HTML
<div class="relative flex w-64 animate-pulse gap-2 p-4">
<div class="h-12 w-12 rounded-full bg-slate-400"></div>
<div class="flex-1">
<div class="mb-1 h-5 w-3/5 rounded-lg bg-slate-400 text-lg"></div>
<div class="h-5 w-[90%] rounded-lg bg-slate-400 text-sm"></div>
</div>
<div class="absolute bottom-5 right-0 h-4 w-4 rounded-full bg-slate-400"></div>
</div>
کد CSS
.absolute {
position: absolute
}
.relative {
position: relative
}
.bottom-5 {
bottom: 1.25rem
}
.right-0 {
right: 0px
}
.mb-1 {
margin-bottom: 0.25rem
}
.flex {
display: flex
}
.h-12 {
height: 3rem
}
.h-4 {
height: 1rem
}
.h-5 {
height: 1.25rem
}
.w-12 {
width: 3rem
}
.w-3\/5 {
width: 60%
}
.w-4 {
width: 1rem
}
.w-64 {
width: 16rem
}
.w-\[90\%\] {
width: 90%
}
.flex-1 {
flex: 1 1 0%
}
@keyframes pulse {
50% {
opacity: .5
}
}
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}
.gap-2 {
gap: 0.5rem
}
.rounded-full {
border-radius: 9999px
}
.rounded-lg {
border-radius: 0.5rem
}
.bg-slate-400 {
--tw-bg-opacity: 1;
background-color: rgb(148 163 184 / var(--tw-bg-opacity))
}
.p-4 {
padding: 1rem
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem
}