Avatar Group

                    <section class="flex flex-col items-center justify-center p-8 gap-12">
  <!-- Basic avatar group -->
  <div>
    <h2 class="text-lg font-semibold mb-4 text-center">Basic Avatar Group</h2>
    <div class="avatar-group -space-x-4">
      <div class="avatar">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=20" alt="User 1" />
        </div>
      </div>
      <div class="avatar">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=21" alt="User 2" />
        </div>
      </div>
      <div class="avatar">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=22" alt="User 3" />
        </div>
      </div>
      <div class="avatar">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=23" alt="User 4" />
        </div>
      </div>
    </div>
  </div>
  
  <!-- Avatar group with counter -->
  <div>
    <h2 class="text-lg font-semibold mb-4 text-center">Avatar Group with Counter</h2>
    <div class="avatar-group -space-x-4">
      <div class="avatar">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=24" alt="User 1" />
        </div>
      </div>
      <div class="avatar">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=25" alt="User 2" />
        </div>
      </div>
      <div class="avatar">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=26" alt="User 3" />
        </div>
      </div>
      <div class="avatar placeholder">
        <div class="w-12 bg-gray-700 text-white rounded-full">
          <span>+9</span>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Avatar group with status -->
  <div>
    <h2 class="text-lg font-semibold mb-4 text-center">Avatar Group with Status</h2>
    <div class="avatar-group -space-x-4">
      <div class="avatar avatar-online">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=27" alt="Online user" />
        </div>
      </div>
      <div class="avatar avatar-offline">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=28" alt="Offline user" />
        </div>
      </div>
      <div class="avatar avatar-away">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=29" alt="Away user" />
        </div>
      </div>
      <div class="avatar avatar-busy">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=30" alt="Busy user" />
        </div>
      </div>
    </div>
  </div>
  
  <!-- Mixed avatar group -->
  <div>
    <h2 class="text-lg font-semibold mb-4 text-center">Mixed Avatar Group</h2>
    <div class="avatar-group -space-x-4">
      <div class="avatar">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=31" alt="User 1" />
        </div>
      </div>
      <div class="avatar avatar-online placeholder">
        <div class="w-12 bg-blue-600 text-white rounded-full">
          <span>JM</span>
        </div>
      </div>
      <div class="avatar">
        <div class="w-12 rounded-full">
          <img src="https://i.pravatar.cc/300?img=32" alt="User 3" />
        </div>
      </div>
      <div class="avatar placeholder">
        <div class="w-12 bg-gray-700 text-white rounded-full">
          <span>+5</span>
        </div>
      </div>
    </div>
  </div>
</section>

<style>
  .avatar {
    position: relative;
    display: inline-flex;
  }
  
  .avatar > div {
    display: block;
    overflow: hidden;
  }
  
  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  /* Avatar Group */
  .avatar-group {
    display: flex;
  }
  
  /* Placeholder styling */
  .avatar.placeholder > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Status indicators */
  .avatar-online:after,
  .avatar-offline:after,
  .avatar-away:after,
  .avatar-busy:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 25%;
    height: 25%;
    border-radius: 50%;
    border: 2px solid white;
    transform: translate(0%, 0%);
    z-index: 10;
  }
  
  .avatar-online:after {
    background-color: #10b981; /* Green */
  }
  
  .avatar-offline:after {
    background-color: #6b7280; /* Gray */
  }
  
  .avatar-away:after {
    background-color: #f59e0b; /* Yellow */
  }
  
  .avatar-busy:after {
    background-color: #ef4444; /* Red */
  }
</style>