<div class="flex gap-4 flex-wrap items-center">
  <div class="avatar tiny">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar small">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar large">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar big">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
</div>

<div class="flex gap-4 flex-wrap items-center">
  <div class="avatar tiny">JD</div>
  <div class="avatar small">AB</div>
  <div class="avatar">MK</div>
  <div class="avatar large">PS</div>
  <div class="avatar big">WB</div>
</div>

<div class="flex gap-3 flex-wrap items-center">
  <div class="avatar">DG</div>
  <div class="avatar grey">GR</div>
  <div class="avatar red">RD</div>
  <div class="avatar orange">OR</div>
  <div class="avatar yellow">YL</div>
  <div class="avatar green">GN</div>
  <div class="avatar teal">TL</div>
  <div class="avatar blue">BL</div>
  <div class="avatar violet">VT</div>
  <div class="avatar purple">PR</div>
  <div class="avatar pink">PK</div>
  <div class="avatar brown">BR</div>
  <div class="avatar olive">OL</div>
  <div class="avatar black">BK</div>
</div>

<div class="flex gap-3 flex-wrap items-center">
  <div class="avatar">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
  <div class="avatar grey">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
  <div class="avatar red">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
  <div class="avatar blue">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
  <div class="avatar green">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
  <div class="avatar purple">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" class="avatar-icon">
      <circle cx="50" cy="50" r="50" class="avatar-bg" />
      <g class="avatar-person" fill="currentColor" opacity="0.6">
        <circle cx="50" cy="35" r="12" />
        <path
          d="M28 75 C28 65, 35 58, 45 58 L55 58 C65 58, 72 65, 72 75 L72 85 C72 90, 68 94, 63 94 L37 94 C32 94, 28 90, 28 85 Z"
        />
      </g>
    </svg>
  </div>
</div>

<div class="flex gap-4 flex-wrap items-center">
  <div class="avatar">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar rounded">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar square">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
</div>

<div class="space-y-6">
  <!-- Default Shape (Round) -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Default Shape (Round)</h4>
    <div class="flex gap-4 flex-wrap items-center">
      <div class="avatar tiny status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar small status negative">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar status green">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar large status warning">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar big status teal">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>

  <!-- Rounded Shape -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Rounded Shape</h4>
    <div class="flex gap-4 flex-wrap items-center">
      <div class="avatar rounded tiny status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded small status negative">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded status green">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded large status warning">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar rounded big status teal">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>

  <!-- Square Shape -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Square Shape</h4>
    <div class="flex gap-4 flex-wrap items-center">
      <div class="avatar square tiny status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square small status negative">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square status green">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square large status warning">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar square big status teal">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>

  <!-- With Initials -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Status with Initials (All Shapes)</h4>
    <div class="flex gap-4 flex-wrap items-center">
      <!-- Round -->
      <div class="avatar status positive">JD</div>
      <div class="avatar status negative">AB</div>
      <!-- Rounded -->
      <div class="avatar rounded status warning">MK</div>
      <div class="avatar rounded status info">PS</div>
      <!-- Square -->
      <div class="avatar square status green">WB</div>
      <div class="avatar square status purple">TG</div>
    </div>
  </div>
</div>

<div class="space-y-6">
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">All Status Positions</h4>
    <div class="flex gap-4 flex-wrap items-center">
      <div class="avatar large status positive">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar large status negative top right">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar large status warning bottom left">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar large status info top left">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
    </div>
  </div>
</div>

<div class="flex gap-4 flex-wrap items-center">
  <div class="avatar badge" data-badge="5">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar badge" data-badge="99+">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar large badge" data-badge="NEW">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
</div>

<div class="flex gap-4 flex-wrap items-center">
  <div class="avatar verified">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar large verified blue">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar large verified gold">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
</div>

<div class="flex gap-4 flex-wrap items-center">
  <div class="avatar vip">
    <img
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
  <div class="avatar large vip gold">
    <img
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
  <div class="avatar large vip purple">
    <img
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
  <div class="avatar large vip primary">
    <img
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
</div>

<div class="space-y-8">
  <!-- Basic Avatar Collection -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">Basic Collection (.avatars)</p>
    <div class="avatars">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
      <div class="count">+12</div>
    </div>
  </div>

  <!-- Stacked Modifier -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">Stacked Modifier (.avatars.stacked) - Hover to animate</p>
    <div class="avatars stacked">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
    </div>
  </div>

  <!-- Tight Modifier -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">Tight Modifier (.avatars.tight) - Tighter spacing</p>
    <div class="avatars tight">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
      <div class="count">+5</div>
    </div>
  </div>

  <!-- Combined Modifiers -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">Combined Modifiers (.avatars.stacked.tight)</p>
    <div class="avatars stacked tight">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User 1"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User 2"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User 3"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User 4"
        />
      </div>
      <div class="count">+8</div>
    </div>
  </div>
</div>

<div class="flex gap-4 flex-wrap items-center">
  <div class="avatar action">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
    <button class="action">
      <i class="icon camera w-4 h-4"></i>
    </button>
  </div>
  <div class="avatar large action">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
    <button class="action">
      <i class="icon pencil w-4 h-4"></i>
    </button>
  </div>
  <div class="avatar big action">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
    <button class="action">
      <i class="icon plus w-8 h-8"></i>
    </button>
  </div>
</div>

<div class="flex gap-4 flex-wrap items-center">
  <div class="avatar ring">
    <img
      src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar ring primary">
    <img
      src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar ring positive">
    <img
      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
  <div class="avatar ring negative">
    <img
      src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
      alt="User avatar"
    />
  </div>
</div>