پیشنمایش زنده
کد HTML
<div
class="flex flex-col bg-neutral-300 w-56 h-64 animate-pulse rounded-xl p-4 gap-4"
>
<div class="bg-neutral-400/50 w-full h-32 animate-pulse rounded-md"></div>
<div class="flex flex-col gap-2">
<div class="bg-neutral-400/50 w-full h-4 animate-pulse rounded-md"></div>
<div class="bg-neutral-400/50 w-4/5 h-4 animate-pulse rounded-md"></div>
<div class="bg-neutral-400/50 w-full h-4 animate-pulse rounded-md"></div>
<div class="bg-neutral-400/50 w-2/4 h-4 animate-pulse rounded-md"></div>
</div>
</div>
کد CSS
.flex{display:flex}.h-32{height:8rem}.h-4{height:1rem}.h-64{height:16rem}.w-2\/4{width:50%}.w-4\/5{width:80%}.w-56{width:14rem}.w-full{width:100%}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite}.flex-col{flex-direction:column}.gap-2{gap:0.5rem}.gap-4{gap:1rem}.rounded-md{border-radius:0.375rem}.rounded-xl{border-radius:0.75rem}.bg-neutral-300{--tw-bg-opacity:1;background-color:rgb(212 212 212 / var(--tw-bg-opacity))}.bg-neutral-400\/50{background-color:rgb(163 163 163 / 0.5)}.p-4{padding:1rem}