Avatar Status

                    <section class="flex items-center justify-center p-8 gap-6">
  <div class="avatar avatar-online">
    <div class="w-24 rounded-full">
      <img src="https://i.pravatar.cc/300?img=11" alt="Online user" />
    </div>
  </div>
  
  <div class="avatar avatar-offline">
    <div class="w-24 rounded-full">
      <img src="https://i.pravatar.cc/300?img=12" alt="Offline user" />
    </div>
  </div>
  
  <div class="avatar avatar-away">
    <div class="w-24 rounded-full">
      <img src="https://i.pravatar.cc/300?img=13" alt="Away user" />
    </div>
  </div>
  
  <div class="avatar avatar-busy">
    <div class="w-24 rounded-full">
      <img src="https://i.pravatar.cc/300?img=14" alt="Busy user" />
    </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;
  }
  
  /* 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%);
  }
  
  .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>