Myna UI

Avatar Groups

Basic

Last Edited on January 25, 2022

<div class="flex -space-x-3">
  <div
    class="relative flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/4?square" />
  </div>
</div>

Reverse Order

Last Edited on January 25, 2022

<div class="flex flex-row-reverse justify-end -space-x-3 space-x-reverse">
  <div
    class="relative flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/8?square" />
  </div>
</div>

Sizes

Last Edited on January 25, 2022

<div class="flex -space-x-2">
  <div
    class="relative flex h-5 w-5 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring-1 ring-white">
    <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-5 w-5 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring-1 ring-white">
    <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-5 w-5 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring-1 ring-white">
    <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-5 w-5 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring-1 ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/4?square" />
  </div>
</div>

<div class="flex -space-x-3">
  <div
    class="relative flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/4?square" />
  </div>
</div>

<div class="flex -space-x-4">
  <div
    class="relative flex h-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <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 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/4?square" />
  </div>
</div>

Text

Last Edited on January 25, 2022

M
M
M
M
M
M
M
M
M
M
M
M
<div class="flex -space-x-2">
  <div
    class="relative flex h-5 w-5 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800 ring-1 ring-white">
    M
  </div>
  <div
    class="relative flex h-5 w-5 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800 ring-1 ring-white">
    M
  </div>
  <div
    class="relative flex h-5 w-5 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800 ring-1 ring-white">
    M
  </div>
  <div
    class="relative flex h-5 w-5 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-xs font-bold uppercase text-gray-800 ring-1 ring-white">
    M
  </div>
</div>

<div class="flex -space-x-3">
  <div
    class="relative flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    M
  </div>
  <div
    class="relative flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    M
  </div>
  <div
    class="relative flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    M
  </div>
  <div
    class="relative flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    M
  </div>
</div>

<div class="flex -space-x-4">
  <div
    class="relative flex h-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    M
  </div>
  <div
    class="relative flex h-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    M
  </div>
  <div
    class="relative flex h-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    M
  </div>
  <div
    class="relative flex h-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    M
  </div>
</div>

Centered

Last Edited on January 25, 2022

<div class="z-0 flex items-center -space-x-2">
  <div
    class="relative z-0 flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/4?square" />
  </div>
  <div
    class="relative z-10 flex h-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/5?square" />
  </div>
  <div
    class="relative z-20 flex h-16 w-16 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/6?square" />
  </div>
  <div
    class="relative z-10 flex h-12 w-12 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/7?square" />
  </div>
  <div
    class="relative z-0 flex h-8 w-8 flex-shrink-0 select-none items-center justify-center rounded-full bg-gray-100 text-sm font-bold uppercase text-gray-800 ring ring-white">
    <img
      class="h-full w-full rounded-full object-cover object-center"
      src="https://source.boringavatars.com/beam/8?square" />
  </div>
</div>