Avatar

<div class="flex justify-center p-6">
  <img
    class="block size-10 shrink-0 rounded-full ring-2 ring-gray-200"
    src="https://composedui.com/img/avatar-3.jpeg"
    alt="Avatar"
    width="40"
    height="40"
  />
</div>

<div class="flex items-center justify-center space-x-6 p-6">
  <a
    href="#"
    class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
  >
  </a>

  <a
    href="#"
    class="relative inline-block size-10 shrink-0 overflow-hidden rounded-md bg-gray-50 align-middle ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
  >
  </a>
</div>

<div class="flex flex-wrap items-center justify-center space-x-6 p-6">
  <a
    href="#"
    class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
  >
    <img class="block h-full w-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
  </a>

  <a
    href="#"
    class="relative inline-block size-10 shrink-0 overflow-hidden rounded-md bg-gray-50 align-middle ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
  >
    <img class="block h-full w-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
  </a>
</div>

<div class="flex flex-wrap items-center justify-center space-x-6 p-6">
  <a
    href="#"
    class="relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
  >
    <span class="text-base text-gray-600">D</span>
  </a>

  <a
    href="#"
    class="relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-gray-50 align-middle ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
  >
    <span class="text-base text-gray-600">Y</span>
  </a>
</div>

<div class="flex flex-wrap items-center justify-center space-x-6 p-6">
  <!-- online -->
  <div class="relative inline-block align-middle">
    <a
      href="#"
      class="relative block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
    >
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </a>
    <div class="absolute -bottom-px -right-px size-3 rounded-full border border-white bg-green-400"></div>
  </div>

  <!-- idle -->
  <div class="relative inline-block align-middle">
    <a
      href="#"
      class="relative block size-10 shrink-0 overflow-hidden rounded-md bg-gray-50 ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
    >
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </a>
    <div class="absolute -bottom-1 -right-1 size-3 rounded-full border border-white bg-orange-400"></div>
  </div>

  <!-- offline -->
  <div class="relative inline-block align-middle">
    <a
      href="#"
      class="relative block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
    >
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </a>
    <div class="absolute -bottom-px -right-px size-3 rounded-full border border-white bg-gray-300"></div>
  </div>
</div>

<div class="flex items-center justify-center space-x-3 p-6">
  <a
    href="#"
    class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
  >
    <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
  </a>

  <!-- Herocions: outline/plus -->
  <svg
    class="size-6 text-gray-500"
    width="24"
    height="24"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    stroke-width="1.5"
    stroke="currentColor"
  >
    <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
  </svg>

  <a
    href="#"
    class="relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition hover:before:opacity-25 focus:outline-0 focus:ring-gray-500"
  >
    <span class="text-base text-gray-600">D</span>
  </a>
</div>

<div class="flex justify-center p-6">
  <div class="flex items-center -space-x-2">
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="flex flex-row-reverse items-center -space-x-2 space-x-reverse">
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="flex items-center -space-x-2">
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
    <div class="relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200">
      <img class="block size-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="40" height="40" />
    </div>
    <div
      class="relative inline-flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200"
    >
      <span class="text-sm font-medium text-gray-600">+27</span>
    </div>
  </div>
</div>

<div class="flex justify-center p-6">
  <div class="flex items-center -space-x-2">
    <div
      class="group relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200 transition hover:z-10 hover:scale-110 hover:bg-indigo-400"
    >
      <img
        class="block size-full object-cover group-hover:mix-blend-luminosity group-focus:mix-blend-luminosity"
        src="https://composedui.com/img/avatar-3.jpeg"
        alt="Avatar"
        width="40"
        height="40"
      />
    </div>
    <div
      class="group relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200 transition hover:z-10 hover:scale-110 hover:bg-indigo-400"
    >
      <img
        class="block size-full object-cover group-hover:mix-blend-luminosity group-focus:mix-blend-luminosity"
        src="https://composedui.com/img/avatar-3.jpeg"
        alt="Avatar"
        width="40"
        height="40"
      />
    </div>
    <div
      class="group relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200 transition hover:z-10 hover:scale-110 hover:bg-indigo-400"
    >
      <img
        class="block size-full object-cover group-hover:mix-blend-luminosity group-focus:mix-blend-luminosity"
        src="https://composedui.com/img/avatar-3.jpeg"
        alt="Avatar"
        width="40"
        height="40"
      />
    </div>
    <div
      class="group relative inline-block size-10 shrink-0 overflow-hidden rounded-full bg-gray-50 align-middle ring-2 ring-gray-200 transition hover:z-10 hover:scale-110 hover:bg-indigo-400"
    >
      <img
        class="block size-full object-cover group-hover:mix-blend-luminosity group-focus:mix-blend-luminosity"
        src="https://composedui.com/img/avatar-3.jpeg"
        alt="Avatar"
        width="40"
        height="40"
      />
    </div>
  </div>
</div>