نشانک

از این کامپوننت‌های نشانک ساخته‌شده با 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>