Avatars are used to represent a user or a system entity.
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full">
<img src="/avatars/avatar-16.jpg" class="rounded-full h-full w-full object-cover object-center" alt="Avatar" loading="lazy"/>
</div><div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-6 w-6 text-xs rounded-full">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-8 w-8 text-xs rounded-full">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-12 w-12 text-sm rounded-full">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-14 w-14 text-base rounded-full">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-16 w-16 text-lg rounded-full">
<span>M</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-20 w-20 text-xl rounded-full">
<span>M</span>
</div><div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-6 w-6 text-xs rounded-full">
<img src="/avatars/avatar-13.jpg" class="rounded-full h-full w-full object-cover object-center" alt="Avatar" loading="lazy"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-8 w-8 text-xs rounded-full">
<img src="/avatars/avatar-14.jpg" class="rounded-full h-full w-full object-cover object-center" alt="Avatar" loading="lazy"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full">
<img src="/avatars/avatar-05.jpg" class="rounded-full h-full w-full object-cover object-center" alt="Avatar" loading="lazy"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-12 w-12 text-sm rounded-full">
<img src="/avatars/avatar-09.jpg" class="rounded-full h-full w-full object-cover object-center" alt="Avatar" loading="lazy"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-14 w-14 text-base rounded-full">
<img src="/avatars/avatar-05.jpg" class="rounded-full h-full w-full object-cover object-center" alt="Avatar" loading="lazy"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-16 w-16 text-lg rounded-full">
<img src="/avatars/avatar-23.jpg" class="rounded-full h-full w-full object-cover object-center" alt="Avatar" loading="lazy"/>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-20 w-20 text-xl rounded-full">
<img src="/avatars/avatar-23.jpg" class="rounded-full h-full w-full object-cover object-center" alt="Avatar" loading="lazy"/>
</div><div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-6 w-6 text-xs rounded-full">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-8 w-8 text-xs rounded-full">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-12 w-12 text-sm rounded-full">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-14 w-14 text-base rounded-full">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-16 w-16 text-lg rounded-full">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-20 w-20 text-xl rounded-full">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
</div><div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-6 w-6 text-xs rounded-full">
<span>M</span>
<span aria-hidden="true" class="bg-slate-500 h-1.5 w-1.5 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-8 w-8 text-xs rounded-full">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
<span aria-hidden="true" class="bg-slate-500 h-2 w-2 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-10 w-10 text-sm rounded-full">
<img src="/avatars/avatar-06.jpg" class="rounded-full h-full w-full object-cover object-center" alt="Avatar" loading="lazy"/>
<span aria-hidden="true" class="bg-slate-500 h-2 w-2 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-12 w-12 text-sm rounded-full">
<span>M</span>
<span aria-hidden="true" class="bg-slate-500 h-2.5 w-2.5 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-14 w-14 text-base rounded-full">
<svg width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg" class="h-1/2 w-1/2 text-slate-500">
<circle cx="12" cy="7.5" r="3">
</circle>
<path d="M19.5 20.5c-.475-9.333-14.525-9.333-15 0">
</path>
</svg>
<span aria-hidden="true" class="bg-emerald-500 h-3 w-3 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-16 w-16 text-lg rounded-full">
<img src="/avatars/avatar-22.jpg" class="rounded-full h-full w-full object-cover object-center" alt="Avatar" loading="lazy"/>
<span aria-hidden="true" class="bg-emerald-500 h-3.5 w-3.5 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>
<div class="relative flex shrink-0 select-none items-center justify-center bg-slate-200 font-bold uppercase text-slate-800 h-20 w-20 text-xl rounded-full">
<span>M</span>
<span aria-hidden="true" class="bg-emerald-500 h-4 w-4 ring-white absolute bottom-0 right-0 rounded-full ring">
</span>
</div>