<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">
  <!-- Default Shape (Round) -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Default Shape (Round) - All 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>

  <!-- Rounded Shape -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Rounded Shape - All Positions</h4>
    <div class="flex gap-4 flex-wrap items-center">
      <div class="avatar rounded 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 rounded 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 rounded 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 rounded 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>

  <!-- Square Shape -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Square Shape - All Positions</h4>
    <div class="flex gap-4 flex-wrap items-center">
      <div class="avatar square 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 square 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 square 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 square 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>

  <!-- Combined Example with Different Sizes -->
  <div>
    <h4 class="text-sm font-medium text-gray-700 mb-3">Different Sizes & Positions</h4>
    <div class="flex gap-4 flex-wrap items-center">
      <!-- Round avatars -->
      <div class="avatar tiny status green top">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <div class="avatar small status yellow right">SM</div>
      <!-- Rounded avatars -->
      <div class="avatar rounded status purple bottom">MD</div>
      <div class="avatar rounded large status pink left">
        <img
          src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces"
          alt="User avatar"
        />
      </div>
      <!-- Square avatars -->
      <div class="avatar square big status teal bottom right">
        <img
          src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?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="flex gap-4 flex-wrap items-center">
  <div class="avatar tiny vip">
    <img
      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
  <div class="avatar small vip">
    <img
      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
  <div class="avatar vip">
    <img
      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
  <div class="avatar large vip">
    <img
      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
      alt="VIP User avatar"
    />
  </div>
  <div class="avatar big vip">
    <img
      src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?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 - Hover animations -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">
      With 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 - Tighter overlap -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">With 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 - Stacked + Tight -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">
      Combined Modifiers (.avatars.stacked.tight) - Hover for enhanced animation
    </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>

  <!-- Size with Modifiers -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">Size + Modifiers (.avatars.small.stacked.tight)</p>
    <div class="avatars small stacked tight">
      <div class="avatar">JD</div>
      <div class="avatar">AB</div>
      <div class="avatar">MK</div>
      <div class="avatar">PS</div>
      <div class="count">+3</div>
    </div>
  </div>
</div>

<div class="space-y-8">
  <!-- Basic Compact Collection -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">Basic Compact Collection (.avatars.compact)</p>
    <div class="avatars compact">
      <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="count">+4</div>
    </div>
  </div>

  <!-- Stacked Compact Collection -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">
      Stacked Compact (.avatars.compact.stacked) - Hover for animation & container elevation
    </p>
    <div class="avatars compact 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="count">+7</div>
    </div>
  </div>

  <!-- Tight Compact Collection -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">
      Tight Compact (.avatars.compact.tight) - Tighter spacing
    </p>
    <div class="avatars compact 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="count">+2</div>
    </div>
  </div>

  <!-- Combined Modifiers -->
  <div class="mb-6">
    <p class="text-sm text-gray-600 mb-3">
      Combined Modifiers (.avatars.compact.small.stacked.tight.primary)
    </p>
    <div class="avatars compact small stacked tight primary">
      <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="count">+15</div>
    </div>
  </div>
</div>

<div class="space-y-4">
  <!-- Semantic Colors -->
  <div class="flex gap-3 flex-wrap items-center">
    <div class="avatars compact small primary">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+5</div>
    </div>

    <div class="avatars compact small positive">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+3</div>
    </div>

    <div class="avatars compact small negative">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+8</div>
    </div>

    <div class="avatars compact small warning">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+12</div>
    </div>

    <div class="avatars compact small info">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+7</div>
    </div>
  </div>

  <!-- Extended Colors Row 1 -->
  <div class="flex gap-3 flex-wrap items-center">
    <div class="avatars compact small purple">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+2</div>
    </div>

    <div class="avatars compact small pink">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+4</div>
    </div>

    <div class="avatars compact small teal">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+15</div>
    </div>

    <div class="avatars compact small yellow">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+99</div>
    </div>

    <div class="avatars compact small olive">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1580489944761-15a19d654956?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1527980965255-d3b416303d12?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+6</div>
    </div>
  </div>

  <!-- Extended Colors Row 2 -->
  <div class="flex gap-3 flex-wrap items-center">
    <div class="avatars compact small violet">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1517841905240-472988babdf9?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+3</div>
    </div>

    <div class="avatars compact small blue">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1607746882042-944635dfe10e?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+7</div>
    </div>

    <div class="avatars compact small green">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+11</div>
    </div>

    <div class="avatars compact small red">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+24</div>
    </div>

    <div class="avatars compact small brown">
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1522075469751-3a6694fb2f61?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="avatar">
        <img
          src="https://images.unsplash.com/photo-1599566150163-29194dcaad36?w=400&h=400&fit=crop&crop=faces"
          alt="User"
        />
      </div>
      <div class="count">+10</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>