Myna UI

Avatars

<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>

<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  P
</div>

<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/1?square" />
</div>

<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/2?square" /><span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-500 ring ring-white"></span>
</div>
P
<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>

<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded bg-gray-100 text-sm font-bold uppercase text-gray-800">
  P
</div>

<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img class="h-full w-full rounded object-cover object-center" src="https://source.boringavatars.com/beam/3?square" />
</div>

<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded object-cover object-center"
    src="https://source.boringavatars.com/beam/4?square" /><span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-2 w-2 rounded bg-green-500 ring ring-white"></span>
</div>
P
<div
  class="relative flex h-6 w-6 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/1?square" />
</div>
<div
  class="relative flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/2?square" />
</div>
<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/3?square" />
</div>
<div
  class="relative flex h-12 w-12 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/4?square" />
</div>
<div
  class="relative flex h-14 w-14 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-base font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/5?square" />
</div>
<div
  class="relative flex h-16 w-16 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-lg font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/6?square" />
</div>
<div
  class="relative flex h-20 w-20 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xl font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/7?square" />
</div>
<div
  class="relative flex h-24 w-24 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-2xl font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/8?square" />
</div>
<div
  class="relative flex h-28 w-28 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-3xl font-bold uppercase text-gray-800">
  <img
    class="h-full w-full rounded-full object-cover object-center"
    src="https://source.boringavatars.com/beam/9?square" />
</div>
<div
  class="relative flex h-6 w-6 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-12 w-12 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-14 w-14 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-base font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-16 w-16 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-lg font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-20 w-20 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xl font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-24 w-24 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-2xl font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-28 w-28 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-3xl font-bold uppercase text-gray-800">
  <svg class="h-1/2 w-1/2 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
    <path
      d="M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h1 1 14H20z"></path>
  </svg>
</div>
<div
  class="relative flex h-6 w-6 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-1.5 w-1.5 rounded-full bg-gray-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-8 w-8 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800">
  M
  <span aria-hidden="true" class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-red-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-10 w-10 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  M
  <span aria-hidden="true" class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-yellow-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-12 w-12 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800">
  M
  <span aria-hidden="true" class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-14 w-14 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-base font-bold uppercase text-gray-800">
  M
  <span aria-hidden="true" class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-blue-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-16 w-16 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-lg font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-3.5 w-3.5 rounded-full bg-indigo-500 ring ring-white"></span>
</div>

<div
  class="relative flex h-20 w-20 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xl font-bold uppercase text-gray-800">
  M
  <span
    aria-hidden="true"
    class="absolute bottom-0 right-0 h-4 w-4 rounded-full bg-purple-500 ring-4 ring-white"></span>
</div>

<div
  class="relative flex h-24 w-24 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-2xl font-bold uppercase text-gray-800">
  M
  <span aria-hidden="true" class="absolute bottom-0 right-0 h-5 w-5 rounded-full bg-pink-500 ring-4 ring-white"></span>
</div>

<div
  class="relative flex h-28 w-28 shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-3xl font-bold uppercase text-gray-800">
  M
  <span aria-hidden="true" class="absolute bottom-0 right-0 h-6 w-6 rounded-full bg-gray-500 ring-4 ring-white"></span>
</div>
M
M
M
M
M
M
M
M
M