<img alt="" src="images/avatars/thumb-1.jpg" class="size-16 mask squircle">
<img alt="" src="images/avatars/thumb-1.jpg" class="size-16 mask triangle">
<img alt="" src="images/avatars/thumb-1.jpg" class="size-16 mask diamond">
<img alt="" src="images/avatars/thumb-1.jpg" class="size-16 mask hexagon">

<img alt="" src="images/avatars/thumb-1.jpg" class="size-6 rounded-full">
<img alt="" src="images/avatars/thumb-1.jpg" class="size-8 rounded-full">
<img alt="" src="images/avatars/thumb-1.jpg" class="size-10 rounded-full">

<span class="size-8 flex items-center justify-center rounded-full bg-stone-400 text-white text-sm font-medium shrink-0 leading-none">
   P
</span>
<span class="size-8 flex items-center justify-center rounded-full bg-stone-400 text-white text-xs font-medium shrink-0 leading-none">
   <span class="icon-[solar--shield-user-linear] text-lg"></span>
</span>
<img alt="" src="images/avatars/thumb-1.jpg" class="size-8 rounded-full">

<div class="flex flex-wrap items-center -space-x-2">
   <img alt="" src="images/avatars/thumb-1.jpg" class="size-8 border-2 border-white dark:border-stone-900 rounded-full">
   <img alt="" src="images/avatars/thumb-2.jpg" class="size-8 border-2 border-white dark:border-stone-900 rounded-full">
   <img alt="" src="images/avatars/thumb-3.jpg" class="size-8 border-2 border-white dark:border-stone-900 rounded-full">
</div>
<div class="flex flex-wrap items-center -space-x-2">
   <img alt="" src="images/avatars/thumb-1.jpg" class="size-8 border-2 border-white dark:border-stone-900 rounded-full">
   <img alt="" src="images/avatars/thumb-2.jpg" class="size-8 border-2 border-white dark:border-stone-900 rounded-full">
   <img alt="" src="images/avatars/thumb-3.jpg" class="size-8 border-2 border-white dark:border-stone-900 rounded-full">
   <span class="size-8 flex items-center justify-center bg-stone-400 border-2 border-white dark:border-stone-900 rounded-full text-white text-xs font-medium">
   3+
   </span>
</div>
<div class="flex flex-wrap items-center -space-x-2">
   <img alt="" src="images/avatars/thumb-7.jpg" class="size-10 border-2 border-white dark:border-stone-900 rounded-full">
   <img alt="" src="images/avatars/thumb-8.jpg" class="size-10 border-2 border-white dark:border-stone-900 rounded-full">
   <img alt="" src="images/avatars/thumb-9.jpg" class="size-10 border-2 border-white dark:border-stone-900 rounded-full">
   <span class="h-10 px-3 flex items-center justify-center bg-stone-400 border-2 border-white dark:border-stone-900 rounded-full text-white text-xs font-medium">
   +20k users
   </span>
</div>

<span class="size-8 rounded-full block relative">
   <img alt="" src="images/avatars/thumb-4.jpg" class="size-8 rounded-full">
   <!--:Status:-->
   <span class="size-2.5 rounded-full border-2 border-white dark:border-stone-900 bg-green-500 block absolute right-0 bottom-0"></span>
</span>
<span class="size-8 rounded-full block relative">
   <img alt="" src="images/avatars/thumb-4.jpg" class="size-8 rounded-full">
   <!--:Status:-->
   <span class="size-2.5 rounded-full border-2 border-white dark:border-stone-900 bg-yellow-500 block absolute right-0 bottom-0"></span>
</span>
<span class="size-8 rounded-full block relative">
   <img alt="" src="images/avatars/thumb-4.jpg" class="size-8 rounded-full">
   <!--:Status:-->
   <span class="size-2.5 rounded-full border-2 border-white dark:border-stone-900 bg-red-500 block absolute right-0 bottom-0"></span>
</span>
<span class="size-8 rounded-full block relative">
   <img alt="" src="images/avatars/thumb-4.jpg" class="size-8 rounded-full">
   <!--:Status:-->
   <span class="size-2.5 rounded-full border-2 border-white dark:border-stone-900 bg-stone-300 block absolute right-0 bottom-0"></span>
</span>