Tailwind CSS Avatar Components

                            <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> 
                        

                            <section class="flex items-center justify-center p-8 gap-4">
  <div class="avatar">
    <div class="w-32 rounded">
      <img src="https://i.pravatar.cc/300?img=2" alt="Large avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-24 rounded">
      <img src="https://i.pravatar.cc/300?img=3" alt="Medium avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-16 rounded">
      <img src="https://i.pravatar.cc/300?img=4" alt="Small avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-12 rounded">
      <img src="https://i.pravatar.cc/300?img=5" alt="Extra small avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-8 rounded">
      <img src="https://i.pravatar.cc/300?img=6" alt="Tiny avatar" />
    </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;
  }
</style> 
                        

                            <section class="flex items-center justify-center p-8 gap-6">
  <div class="avatar">
    <div class="w-24 rounded">
      <img src="https://i.pravatar.cc/300?img=7" alt="Square avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-24 rounded-lg">
      <img src="https://i.pravatar.cc/300?img=8" alt="Rounded avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-24 rounded-xl">
      <img src="https://i.pravatar.cc/300?img=9" alt="More rounded avatar" />
    </div>
  </div>
  
  <div class="avatar">
    <div class="w-24 rounded-full">
      <img src="https://i.pravatar.cc/300?img=10" alt="Circular avatar" />
    </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;
  }
</style> 
                        

                            <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> 
                        

                            <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> 
                        

                            <section class="max-w-5xl mx-auto p-8">
  <h1 class="text-3xl font-bold text-center mb-10">Avatar Component Showcase</h1>
  
  <div class="grid grid-cols-1 md:grid-cols-2 gap-10">
    <!-- Basic Avatars -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-xl font-semibold mb-4">Basic Avatars</h2>
      <div class="flex flex-wrap gap-4 items-center">
        <div class="avatar">
          <div class="w-24 rounded">
            <img src="https://i.pravatar.cc/300?img=1" alt="Profile picture" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-20 rounded">
            <img src="https://i.pravatar.cc/300?img=2" alt="Profile picture" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-16 rounded">
            <img src="https://i.pravatar.cc/300?img=3" alt="Profile picture" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-12 rounded">
            <img src="https://i.pravatar.cc/300?img=4" alt="Profile picture" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-8 rounded">
            <img src="https://i.pravatar.cc/300?img=5" alt="Profile picture" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- Rounded Avatars -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-xl font-semibold mb-4">Rounded Avatars</h2>
      <div class="flex flex-wrap gap-4 items-center">
        <div class="avatar">
          <div class="w-20 rounded">
            <img src="https://i.pravatar.cc/300?img=6" alt="Square avatar" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-20 rounded-lg">
            <img src="https://i.pravatar.cc/300?img=7" alt="Rounded avatar" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-20 rounded-xl">
            <img src="https://i.pravatar.cc/300?img=8" alt="More rounded avatar" />
          </div>
        </div>
        <div class="avatar">
          <div class="w-20 rounded-full">
            <img src="https://i.pravatar.cc/300?img=9" alt="Circular avatar" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- Status Avatars -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-xl font-semibold mb-4">Status Indicators</h2>
      <div class="flex flex-wrap gap-4 items-center">
        <div class="avatar avatar-online">
          <div class="w-16 rounded-full">
            <img src="https://i.pravatar.cc/300?img=10" alt="Online user" />
          </div>
        </div>
        <div class="avatar avatar-offline">
          <div class="w-16 rounded-full">
            <img src="https://i.pravatar.cc/300?img=11" alt="Offline user" />
          </div>
        </div>
        <div class="avatar avatar-away">
          <div class="w-16 rounded-full">
            <img src="https://i.pravatar.cc/300?img=12" alt="Away user" />
          </div>
        </div>
        <div class="avatar avatar-busy">
          <div class="w-16 rounded-full">
            <img src="https://i.pravatar.cc/300?img=13" alt="Busy user" />
          </div>
        </div>
      </div>
    </div>
    
    <!-- Placeholder Avatars -->
    <div class="bg-white p-6 rounded-lg shadow-md">
      <h2 class="text-xl font-semibold mb-4">Placeholder Avatars</h2>
      <div class="flex flex-wrap gap-4 items-center">
        <div class="avatar placeholder">
          <div class="bg-gray-700 text-white w-16 rounded-full">
            <span class="text-xl">JD</span>
          </div>
        </div>
        <div class="avatar avatar-online placeholder">
          <div class="bg-blue-600 text-white w-16 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-16 rounded-full">
            <span class="text-xs">WB</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Avatar Groups -->
    <div class="bg-white p-6 rounded-lg shadow-md col-span-full">
      <h2 class="text-xl font-semibold mb-4">Avatar Groups</h2>
      <div class="flex flex-col gap-6">
        <div>
          <h3 class="text-lg font-medium mb-2">Basic Group</h3>
          <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>
        
        <div>
          <h3 class="text-lg font-medium mb-2">Group with Counter</h3>
          <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 placeholder">
              <div class="w-12 bg-gray-700 text-white rounded-full">
                <span>+9</span>
              </div>
            </div>
          </div>
        </div>
        
        <div>
          <h3 class="text-lg font-medium mb-2">Mixed Group</h3>
          <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=26" alt="Online user" />
              </div>
            </div>
            <div class="avatar avatar-offline">
              <div class="w-12 rounded-full">
                <img src="https://i.pravatar.cc/300?img=27" alt="Offline user" />
              </div>
            </div>
            <div class="avatar placeholder">
              <div class="w-12 bg-blue-600 text-white rounded-full">
                <span>JM</span>
              </div>
            </div>
            <div class="avatar placeholder">
              <div class="w-12 bg-gray-700 text-white rounded-full">
                <span>+5</span>
              </div>
            </div>
          </div>
        </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> 
                        

                            <section class="flex items-center justify-center p-8">
  <div class="avatar">
    <div class="w-24 rounded">
      <img src="https://i.pravatar.cc/300?img=1" alt="Profile picture" />
    </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;
  }
</style>