اجزای پایه
چیدمانهای دادهای
ساختار صفحات
از این کامپوننتهای نشانک ساختهشده با Tailwind CSS برای نمایش یا برجستهکردن اطلاعات مهم، وضعیتها یا تعداد آیتمها در رابط کاربری استفاده کنید.
<!-- Badge -->
<span
class="inline-flex items-center gap-x-2.5 text-green-600 before:shrink-0 before:inline-block before:size-1 before:bg-green-600 before:rounded-full before:ring-2 before:ring-green-600/40">
<span class="whitespace-nowrap font-semibold text-xs">پرداخت شده</span>
</span>
<!-- Badge -->
<div class="flex items-center gap-x-1.5 bg-surface rounded-full shadow ps-0.5 pe-2.5 py-0.5">
<div class="flex -space-x-2">
<span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
<img src="https://blocks.spacedev.ir/images/avatars/01.jpg" class="size-full object-cover" alt="..." />
</span>
<span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
<img src="https://blocks.spacedev.ir/images/avatars/02.jpg" class="size-full object-cover" alt="..." />
</span>
<span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
<img src="https://blocks.spacedev.ir/images/avatars/03.jpg" class="size-full object-cover" alt="..." />
</span>
<span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
<img src="https://blocks.spacedev.ir/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
</span>
<span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
<img src="https://blocks.spacedev.ir/images/avatars/05.jpg" class="size-full object-cover" alt="..." />
</span>
</div>
<p class="cursor-default text-surface-2-content text-2xs font-semibold line-clamp-1">
مورد اعتماد <span class="font-sans">+60k</span> توسعه دهنده
</p>
</div>