<span class="inline-block size-6 rounded-full overflow-hidden">
    <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
</span>
<span class="inline-block size-8 rounded-full overflow-hidden">
    <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
</span>
<span class="inline-block size-10 rounded-full overflow-hidden">
    <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
</span>
<span class="inline-block size-12 rounded-full overflow-hidden">
    <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
</span>
<span class="inline-block size-14 rounded-full overflow-hidden">
    <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
</span>

<div class="flex -space-x-2">
    <span class="inline-block size-7 border-2 border-white rounded-full overflow-hidden">
        <img src="/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="/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="/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="/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="/images/avatars/05.jpg" class="size-full object-cover" alt="..." />
    </span>
</div>

<div class="flex -space-x-3">
    <span class="inline-block size-10 border-2 border-white rounded-full overflow-hidden">
        <img src="/images/avatars/01.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block size-10 border-2 border-white rounded-full overflow-hidden">
        <img src="/images/avatars/02.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block size-10 border-2 border-white rounded-full overflow-hidden">
        <img src="/images/avatars/03.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block size-10 border-2 border-white rounded-full overflow-hidden">
        <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block size-10 border-2 border-white rounded-full overflow-hidden">
        <img src="/images/avatars/05.jpg" class="size-full object-cover" alt="..." />
    </span>
</div>

<div class="flex -space-x-2 relative z-0">
    <span class="inline-block relative size-7 border-2 border-white rounded-full overflow-hidden z-40">
        <img src="/images/avatars/01.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block relative size-7 border-2 border-white rounded-full overflow-hidden z-30">
        <img src="/images/avatars/02.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block relative size-7 border-2 border-white rounded-full overflow-hidden z-20">
        <img src="/images/avatars/03.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block relative size-7 border-2 border-white rounded-full overflow-hidden z-10">
        <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block relative size-7 border-2 border-white rounded-full overflow-hidden z-0">
        <img src="/images/avatars/05.jpg" class="size-full object-cover" alt="..." />
    </span>
</div>

<div class="flex -space-x-3 relative z-0">
    <span class="inline-block relative size-10 border-2 border-white rounded-full overflow-hidden z-40">
        <img src="/images/avatars/01.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block relative size-10 border-2 border-white rounded-full overflow-hidden z-30">
        <img src="/images/avatars/02.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block relative size-10 border-2 border-white rounded-full overflow-hidden z-20">
        <img src="/images/avatars/03.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block relative size-10 border-2 border-white rounded-full overflow-hidden z-10">
        <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="inline-block relative size-10 border-2 border-white rounded-full overflow-hidden z-0">
        <img src="/images/avatars/05.jpg" class="size-full object-cover" alt="..." />
    </span>
</div>

<!-- Top status indicator -->
<span class="inline-flex relative">
    <span class="inline-block size-12 rounded-full overflow-hidden">
        <img src="/images/avatars/04.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="absolute end-1.5 top-0 size-2 bg-emerald-500 ring-2 ring-white rounded-full">
    </span>
</span>

<!-- Bottom status indicator -->
<span class="inline-flex relative">
    <span class="inline-block size-12 rounded-full overflow-hidden">
        <img src="/images/avatars/01.jpg" class="size-full object-cover" alt="..." />
    </span>
    <span class="absolute start-1.5 bottom-0 size-2 bg-emerald-500 ring-2 ring-white rounded-full">
    </span>
</span>