Avatar

<div
class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-10 w-10 text-sm"
>
<img
  src="https://plus.unsplash.com/premium_photo-1689977968861-9c91dbb16049?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8fDA%3D"
  alt="anthony"
  class="h-full w-full object-cover"
/>
</div>

<div
class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-10 w-10 text-sm"
>
<span>A</span>
</div>

<!-- size xs -->
<div
class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-6 w-6 text-xs"
>
<img
  src="https://plus.unsplash.com/premium_photo-1689977968861-9c91dbb16049?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8fDA%3D"
  alt="anthony"
  class="h-full w-full object-cover"
/>
</div>
 
<!-- size sm -->
<div
class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-8 w-8 text-xs"
>
<img
  src="https://plus.unsplash.com/premium_photo-1689977968861-9c91dbb16049?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8fDA%3D"
  alt="anthony"
  class="h-full w-full object-cover"
/>
</div>
 
<!-- size md -->
<div
class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-10 w-10 text-sm"
>
<img
  src="https://plus.unsplash.com/premium_photo-1689977968861-9c91dbb16049?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8fDA%3D"
  alt="anthony"
  class="h-full w-full object-cover"
/>
</div>
 
<!-- size lg -->
<div
class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-12 w-12 text-sm"
>
<img
  src="https://plus.unsplash.com/premium_photo-1689977968861-9c91dbb16049?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8fDA%3D"
  alt="anthony"
  class="h-full w-full object-cover"
/>
</div>
 
<!-- size xl -->
<div
class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-14 w-14 text-sm"
>
<img
  src="https://plus.unsplash.com/premium_photo-1689977968861-9c91dbb16049?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8fDA%3D"
  alt="anthony"
  class="h-full w-full object-cover"
/>
</div>
 
<!-- size xxl -->
<div
class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-16 w-16 text-sm"
>
<img
  src="https://plus.unsplash.com/premium_photo-1689977968861-9c91dbb16049?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8fDA%3D"
  alt="anthony"
  class="h-full w-full object-cover"
/>
</div>

<!-- size xs -->
    <div
    class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-6 w-6 text-xs"
    >
    <span>A</span>
    </div>
    
    <!-- size sm -->
    <div
    class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-8 w-8 text-xs"
    >
    <span>A</span>
    </div>
    
    <!-- size md -->
    <div
    class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-10 w-10 text-sm"
    >
    <span>A</span>
    </div>
    
    <!-- size lg -->
    <div
    class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-12 w-12 text-sm"
    >
    <span>A</span>
    </div>
    
    <!-- size xl -->
    <div
    class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-14 w-14 text-sm"
    >
    <span>A</span>
    </div>
    
    <!-- size xxl -->
    <div
    class="relative flex items-center justify-center shrink-0 overflow-hidden bg-muted rounded-full h-16 w-16 text-sm"
    >
    <span>A</span>
    </div>

<div class="-space-x-2 flex items-center justify-center">
  <div
    class="relative flex items-center justify-center shrink-0 overflow-hidden ring-muted-text bg-muted rounded-full ring-1 h-8 w-8 text-xs"
  >
    <img
      alt="avatar"
      src="https://plus.unsplash.com/premium_photo-1689977968861-9c91dbb16049?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cHJvZmlsZSUyMHBpY3R1cmV8ZW58MHx8MHx8fDA%3D"
      class="h-full w-full object-cover"
    />
  </div>
  <div
    class="relative flex items-center justify-center shrink-0 overflow-hidden ring-muted-text bg-muted rounded-full ring-1 h-8 w-8 text-xs"
  >
    <img
      alt="avatar"
      src="https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OHx8YXZhdGFyfGVufDB8fDB8fHww"
      class="h-full w-full object-cover"
    />
  </div>
  <div
    class="relative flex items-center justify-center shrink-0 overflow-hidden ring-muted-text bg-muted rounded-full ring-1 h-8 w-8 text-xs"
  >
    <img
      alt="avatar"
      src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTl8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D"
      class="h-full w-full object-cover"
    />
  </div>
  <div
    class="!ml-1.5 flex items-center justify-center text-sm text-muted-text"
  >
    +3
  </div>
</div>