Avatar With bottom state
Avatar With bottom state
=
<div class="flex flex-wrap items-end justify-center gap-3">
<div class="relative h-6 w-6">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute right-0 bottom-0 h-1.5 w-1.5 rounded-full bg-secondary-300 ring ring-white"></span>
</div>
<div class="relative h-8 w-8">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-green-400 ring ring-white"></span>
</div>
<div class="relative h-10 w-10">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute right-0 bottom-0 h-2.5 w-2.5 rounded-full bg-red-400 ring ring-white"></span>
</div>
<div class="relative h-12 w-12">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute bottom-0 right-0 h-3 w-3 rounded-full bg-secondary-300 ring ring-white"></span>
</div>
<div class="relative h-14 w-14">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute right-0 bottom-0 h-3.5 w-3.5 rounded-full bg-green-400 ring ring-white"></span>
</div>
<div class="relative h-16 w-16">
<img class="h-full w-full rounded-full object-cover object-center" src="https://images.unsplash.com/photo-1645378999013-95abebf5f3c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
<span class="absolute bottom-0 right-0 h-4 w-4 rounded-full bg-red-400 ring ring-white"></span>
</div>
</div>