Avatar Placeholder

                    <section class="flex items-center justify-center p-8 gap-6">
  <div class="avatar placeholder">
    <div class="bg-gray-700 text-white w-24 rounded-full">
      <span class="text-3xl">JD</span>
    </div>
  </div>
  
  <div class="avatar avatar-online placeholder">
    <div class="bg-blue-600 text-white w-20 rounded-full">
      <span class="text-xl">MK</span>
    </div>
  </div>
  
  <div class="avatar placeholder">
    <div class="bg-green-600 text-white w-16 rounded-full">
      <span>TS</span>
    </div>
  </div>
  
  <div class="avatar placeholder">
    <div class="bg-red-600 text-white w-12 rounded-full">
      <span class="text-xs">WB</span>
    </div>
  </div>
  
  <div class="avatar placeholder">
    <div class="bg-yellow-500 text-white w-8 rounded-full">
      <span class="text-2xs">A</span>
    </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;
  }
  
  /* Placeholder styling */
  .avatar.placeholder > div {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Status indicators */
  .avatar-online:after,
  .avatar-offline: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 */
  }
  
  .text-2xs {
    font-size: 0.65rem;
  }
</style>