Circular Avatars

PHOTO EMBED

Sat Sep 11 2021 21:05:03 GMT+0000 (Coordinated Universal Time)

Saved by @mtsit #undefined

<div class="flex space-x-">
2
  <div class="relative w- h-12">

    <img class="rounded-full border border-gray-0 shadow-sm" src="https://randomuser.me/api/portraits/women/1.jpg" alt="user image" />

    <div class="absolute top-0 right-0 h-3 w-3 my-1 border-2 border-white rounded-full bg-green-400 z-2"></div>

  </div>

​

  <div class="relative w- h-16">
8
    <img class="rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/81.jpg" alt="user image" />

    <div class="absolute top-0 right-0 h-4 w-4 my-1 border-2 border-white rounded-full bg-green-400 z-2"></div>
10
  </div>

​
12
  <div class="relative w-24 h-24">

    <img class="rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/81.jpg" alt="user image" />

    <div class="absolute top-0 right-0 h-6 w-6 my-1 border-4 border-white rounded-full bg-green-400 z-2"></div>

  </div>
16
</div>

​

<div class="flex space-x-2">

  <div class="relative w-12 h-12">

    <img class="rounded-full border border-gray-100 shadow-sm" src="https://randomuser.me/api/portraits/women/81.jpg" alt="user image" />
content_copyCOPY

https://codepen.io/oidre/pen/ExPaaEJ