Avatar With top 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-1472099645785-5658abf4ff4e?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 top-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-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
    <span class="absolute top-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-1472099645785-5658abf4ff4e?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 top-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-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
    <span class="absolute top-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-1472099645785-5658abf4ff4e?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 top-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-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" />
    <span class="absolute top-0 right-0 h-4 w-4 rounded-full bg-red-400 ring ring-white"></span>
  </div>
</div>