Badge

<!-- Gray -->
<span class="rounded bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200">Gray</span>

<!-- Red -->
<span class="rounded bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-300">Red</span>

<!-- Orange -->
<span class="rounded bg-orange-100 text-orange-700 font-medium px-2 py-1 text-xs dark:bg-orange-500/20 dark:text-orange-300">Orange</span>

<!-- Yellow -->
<span class="rounded bg-yellow-100 text-yellow-700 font-medium px-2 py-1 text-xs dark:text-yellow-300 dark:bg-yellow-500/20">Yellow</span>

<!-- Green -->
<span class="rounded bg-green-100 text-green-800 font-medium px-2 py-1 text-xs dark:text-green-300 dark:bg-green-500/20">Green</span>

<!-- Blue -->
<span class="rounded bg-blue-100 text-blue-800 font-medium px-2 py-1 leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20">Blue</span>

<!-- Indigo -->
<span class="rounded bg-indigo-100 text-indigo-800 font-medium px-2 py-1 leading-tight text-xs dark:text-indigo-300 dark:bg-indigo-500/20">Indigo</span>

<!-- Purple -->
<span class="rounded bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20">Purple</span>

<!-- Pink -->
<span class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20">Pink</span>

<!-- White -->
<span class="rounded bg-white-100 text-slate-800 border border-slate-200 font-medium px-2 py-1 leading-tight text-xs dark:border-none dark:bg-white/10 dark:text-white/80">White</span>

/ Gray
%span.rounded.bg-neutral-100.text-neutral-800.font-medium.px-2.py-1.text-xs.dark:text-neutral-200(class="dark:bg-neutral-500/20") Gray
/ Red
%span.rounded.bg-red-100.text-red-800.font-medium.px-2.py-1.text-xs.dark:text-red-300(class="dark:bg-red-500/20") Red
/ Orange
%span.rounded.bg-orange-100.text-orange-700.font-medium.px-2.py-1.text-xs.dark:text-orange-300(class="dark:bg-orange-500/20") Orange
/ Yellow
%span.rounded.bg-yellow-100.text-yellow-700.font-medium.px-2.py-1.text-xs.dark:text-yellow-300(class="dark:bg-yellow-500/20") Yellow
/ Green
%span.rounded.bg-green-100.text-green-800.font-medium.px-2.py-1.text-xs.dark:text-green-300(class="dark:bg-green-500/20") Green
/ Blue
%span.rounded.bg-blue-100.text-blue-800.font-medium.px-2.py-1.leading-tight.text-xs.dark:text-blue-300(class="dark:bg-blue-500/20") Blue
/ Indigo
%span.rounded.bg-indigo-100.text-indigo-800.font-medium.px-2.py-1.leading-tight.text-xs.dark:text-indigo-300(class="dark:bg-indigo-500/20") Indigo
/ Purple
%span.rounded.bg-purple-100.text-purple-800.font-medium.px-2.py-1.leading-tight.text-xs.dark:text-purple-300(class="dark:bg-purple-500/20") Purple
/ Pink
%span.rounded.bg-pink-100.text-pink-800.font-medium.px-2.py-1.leading-tight.text-xs.dark:text-pink-300(class="dark:bg-pink-500/20") Pink
/ White
%span.rounded.bg-white-100.text-slate-800.border.border-slate-200.font-medium.px-2.py-1.leading-tight.text-xs.dark:border-none(class="dark:bg-white/10 dark:text-white/80") White

<!-- Gray -->
<span class="rounded-full bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200">Gray</span>

<!-- Red -->
<span class="rounded-full bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-300">Red</span>

<!-- Orange -->
<span class="rounded-full bg-orange-100 text-orange-700 font-medium px-2 py-1 text-xs dark:bg-orange-500/20 dark:text-orange-300">Orange</span>

<!-- Yellow -->
<span class="rounded-full bg-yellow-100 text-yellow-700 font-medium px-2 py-1 text-xs dark:text-yellow-300 dark:bg-yellow-500/20">Yellow</span>

<!-- Green -->
<span class="rounded-full bg-green-100 text-green-800 font-medium px-2 py-1 text-xs dark:text-green-300 dark:bg-green-500/20">Green</span>

<!-- Blue -->
<span class="rounded-full bg-blue-100 text-blue-800 font-medium px-2 py-1 leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20">Blue</span>

<!-- Indigo -->
<span class="rounded-full bg-indigo-100 text-indigo-800 font-medium px-2 py-1 leading-tight text-xs dark:text-indigo-300 dark:bg-indigo-500/20">Indigo</span>

<!-- Purple -->
<span class="rounded-full bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20">Purple</span>

<!-- Pink -->
<span class="rounded-full bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20">Pink</span>

<!-- White -->
<span class="rounded-full bg-white-100 text-slate-800 border border-slate-200 font-medium px-2 py-1 leading-tight text-xs dark:border-none dark:bg-white/10 dark:text-white/80">White</span>

/ Gray
%span.rounded-full.bg-neutral-100.text-neutral-800.font-medium.px-2.py-1.text-xs.dark:text-neutral-200(class="dark:bg-neutral-500/20") Gray
/ Red
%span.rounded-full.bg-red-100.text-red-800.font-medium.px-2.py-1.text-xs.dark:text-red-300(class="dark:bg-red-500/20") Red
/ Orange
%span.rounded-full.bg-orange-100.text-orange-700.font-medium.px-2.py-1.text-xs.dark:text-orange-300(class="dark:bg-orange-500/20") Orange
/ Yellow
%span.rounded-full.bg-yellow-100.text-yellow-700.font-medium.px-2.py-1.text-xs.dark:text-yellow-300(class="dark:bg-yellow-500/20") Yellow
/ Green
%span.rounded-full.bg-green-100.text-green-800.font-medium.px-2.py-1.text-xs.dark:text-green-300(class="dark:bg-green-500/20") Green
/ Blue
%span.rounded-full.bg-blue-100.text-blue-800.font-medium.px-2.py-1.leading-tight.text-xs.dark:text-blue-300(class="dark:bg-blue-500/20") Blue
/ Indigo
%span.rounded-full.bg-indigo-100.text-indigo-800.font-medium.px-2.py-1.leading-tight.text-xs.dark:text-indigo-300(class="dark:bg-indigo-500/20") Indigo
/ Purple
%span.rounded-full.bg-purple-100.text-purple-800.font-medium.px-2.py-1.leading-tight.text-xs.dark:text-purple-300(class="dark:bg-purple-500/20") Purple
/ Pink
%span.rounded-full.bg-pink-100.text-pink-800.font-medium.px-2.py-1.leading-tight.text-xs.dark:text-pink-300(class="dark:bg-pink-500/20") Pink
/ White
%span.rounded-full.bg-white-100.text-slate-800.border.border-slate-200.font-medium.px-2.py-1.leading-tight.text-xs.dark:border-none(class="dark:bg-white/10 dark:text-white/80") White

<!-- Gray -->
<span class="rounded text-neutral-800 font-medium px-2 py-1 text-xs border border-neutral-800/60 bg-neutral-50/60 dark:bg-neutral-500/20 dark:text-neutral-200 dark:border-neutral-500/40">Gray</span>

<!-- Red -->
<span class="rounded bg-red-50/30 text-red-600 font-medium px-2 py-1 text-xs border border-red-600/60  dark:border-red-700/50 dark:bg-red-500/20 dark:text-red-300">Red</span>

<!-- Orange -->
<span class="rounded bg-orange-50/30 text-orange-600 font-medium px-2 py-1 text-xs border border-orange-600/60  dark:border-orange-700/50 dark:bg-orange-500/20 dark:text-orange-300">Orange</span>

<!-- Yellow -->
<span class="rounded bg-yellow-50/30 text-yellow-700 font-medium px-2 py-1 text-xs border border-yellow-500/60 dark:text-yellow-300 dark:bg-yellow-500/20 dark:border-yellow-700/50">Yellow</span>

<!-- Green -->
<span class="rounded bg-green-50/30 text-green-700 font-medium px-2 py-1 text-xs border border-green-500/60 dark:text-green-300 dark:bg-green-500/20 dark:border-green-700/50">Green</span>

<!-- Blue -->
<span class="rounded bg-blue-50/30 text-blue-800 font-medium px-2 py-1 leading-tight text-xs border border-blue-600/60 dark:text-blue-300 dark:bg-blue-500/20 dark:border-blue-700/50">Blue</span>

<!-- Indigo -->
<span class="rounded bg-indigo-50/30 text-indigo-800 font-medium px-2 py-1 leading-tight text-xs border border-indigo-600/60 dark:text-indigo-300 dark:bg-indigo-500/20 dark:border-indigo-700/50">Indigo</span>

<!-- Purple -->
<span class="rounded bg-purple-50/30 text-purple-800 font-medium px-2 py-1 leading-tight text-xs border border-indigo-600/60 dark:text-purple-300 dark:bg-purple-500/20 dark:border-purple-700/50">Purple</span>

<!-- Pink -->
<span class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs border border-pink-600/60 dark:text-pink-300 dark:bg-pink-500/20 dark:border-pink-700/50">Pink</span>

<!-- White -->
<span class="rounded bg-white-100 text-slate-800 border border-slate-400 font-medium px-2 py-1 leading-tight text-xs dark:bg-white/10 dark:text-white/80 dark:border-white/30">White</span>

/ Gray
%span.rounded.text-neutral-800.font-medium.px-2.py-1.text-xs.border.dark:text-neutral-200(class="border-neutral-800/60 bg-neutral-50/60 dark:bg-neutral-500/20 dark:border-neutral-500/40") Gray
/ Red
%span.rounded.text-red-600.font-medium.px-2.py-1.text-xs.border.dark:text-red-300(class="bg-red-50/30 border-red-600/60 dark:border-red-700/50 dark:bg-red-500/20") Red
/ Orange
%span.rounded.text-orange-600.font-medium.px-2.py-1.text-xs.border.dark:text-orange-300(class="bg-orange-50/30 border-orange-600/60 dark:border-orange-700/50 dark:bg-orange-500/20") Orange
/ Yellow
%span.rounded.text-yellow-700.font-medium.px-2.py-1.text-xs.border.dark:text-yellow-300(class="bg-yellow-50/30 border-yellow-500/60 dark:bg-yellow-500/20 dark:border-yellow-700/50") Yellow
/ Green
%span.rounded.text-green-700.font-medium.px-2.py-1.text-xs.border.dark:text-green-300(class="bg-green-50/30 border-green-500/60 dark:bg-green-500/20 dark:border-green-700/50") Green
/ Blue
%span.rounded.text-blue-800.font-medium.px-2.py-1.leading-tight.text-xs.border.dark:text-blue-300(class="bg-blue-50/30 border-blue-600/60 dark:bg-blue-500/20 dark:border-blue-700/50") Blue
/ Indigo
%span.rounded.text-indigo-800.font-medium.px-2.py-1.leading-tight.text-xs.border.dark:text-indigo-300(class="bg-indigo-50/30 border-indigo-600/60 dark:bg-indigo-500/20 dark:border-indigo-700/50") Indigo
/ Purple
%span.rounded.text-purple-800.font-medium.px-2.py-1.leading-tight.text-xs.border.dark:text-purple-300(class="bg-purple-50/30 border-indigo-600/60 dark:bg-purple-500/20 dark:border-purple-700/50") Purple
/ Pink
%span.rounded.bg-pink-100.text-pink-800.font-medium.px-2.py-1.leading-tight.text-xs.border.dark:text-pink-300(class="border-pink-600/60 dark:bg-pink-500/20 dark:border-pink-700/50") Pink
/ White
%span.rounded.bg-white-100.text-slate-800.border.border-slate-400.font-medium.px-2.py-1.leading-tight.text-xs(class="dark:bg-white/10 dark:text-white/80 dark:border-white/30") White

<!-- Gray -->
  <div class="rounded bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
    <span class="flex-1">Gray</span>
    <a href="#" class="size-4 rounded hover:bg-neutral-200 dark:hover:bg-neutral-500/40 flex items-center justify-center focus:ring-2 focus:ring-neutral-300/50 group">
      <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-neutral-700 dark:text-neutral-400 hover:cursor-pointer dark:group-hover:text-neutral-300 group-hover:text-neutral-500" %>
    </a>
  </div>

  <!-- Red -->
  <div class="rounded bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-200 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
    <span class="flex-1">Red</span>
    <a href="#" class="size-4 rounded hover:bg-red-200 dark:hover:bg-red-500/40 flex items-center justify-center focus:ring-2 focus:ring-red-300/50 group">
      <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-red-500 dark:text-red-500/90 hover:cursor-pointer dark:group-hover:text-red-200 group-hover:text-red-500" %>
    </a>
  </div>

  <!-- Orange -->
  <div class="rounded bg-orange-100 text-orange-700 font-medium text-xs dark:text-orange-300 px-2 dark:bg-orange-500/20 pl-2 pr-1 py-1  inline-flex items-center justify-between space-x-1">
    <span class="flex-1">Orange</span>
    <a href="#" class="size-4 rounded hover:bg-orange-200 dark:hover:bg-orange-500/40 flex items-center justify-center focus:ring-2 focus:ring-orange-300/50 group">
      <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-red-700 dark:text-orange-500 hover:cursor-pointer dark:group-hover:text-orange-200 group-hover:text-orange-500" %>
    </a>
  </div>

  <!-- Yellow -->
  <div class="rounded bg-yellow-100 text-yellow-700 font-medium dark:text-yellow-300 dark:bg-yellow-500/20 px-2 py-1 text-xs  pl-2 pr-1 inline-flex items-center justify-between space-x-1">
    <span class="flex-1">Yellow</span>
    <a href="#" class="size-4 rounded hover:bg-yellow-200 dark:hover:bg-yellow-500/40 flex items-center justify-center focus:ring-2 focus:ring-yellow-300/50 group">
      <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-yellow-800 dark:text-yellow-500 hover:cursor-pointer
group-hover:text-yellow-600
dark:group-hover:text-yellow-200" %>
    </a>
  </div>

  <!-- Green -->
  <div class="rounded bg-green-100 text-green-800 font-medium py-1 text-xs dark:text-green-300 dark:bg-green-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
    <span class="flex-1">Green</span>
    <a href="#" class="size-4 rounded hover:bg-green-200/70 dark:hover:bg-green-500/40 flex items-center justify-center focus:ring-2 focus:ring-green-500/20 group">
      <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-green-700 hover:cursor-pointer
dark:text-green-400
dark:group-hover:text-green-200 group-hover:text-green-800" %>
    </a>
  </div>

  <!-- Blue -->
  <div class="rounded bg-blue-100 text-blue-800 font-medium leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20 pl-2 pr-1 py-1 inline-flex items-center justify-between space-x-1">
    <span class="flex-1">Blue</span>
    <a href="#" class="size-4 rounded hover:bg-blue-200/70 dark:hover:bg-blue-500/40 flex items-center justify-center focus:ring-2 focus:ring-blue-500/20 group">
      <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-blue-800 hover:cursor-pointer group-hover:text-blue-800 dark:text-blue-400
dark:group-hover:text-blue-200" %>
    </a>
  </div>

  <!-- Indigo -->
  <div class="rounded bg-indigo-100 text-indigo-800 font-medium py-1 leading-tight dark:text-indigo-300 dark:bg-indigo-500/20 pl-2 pr-1 text-xs inline-flex items-center justify-between space-x-1">
    <span class="flex-1">Indigo</span>
    <a href="#" class="size-4 rounded hover:bg-indigo-200/70 dark:hover:bg-indigo-500/20 flex items-center justify-center focus:ring-2 focus:ring-indigo-500/20 group">
      <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-indigo-800 hover:cursor-pointer group-hover:text-indigo-800
dark:text-indigo-400
dark:group-hover:text-indigo-200" %>
    </a>
  </div>

  <!-- Purple -->
  <div class="rounded bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
    <span class="flex-1">Purple</span>
    <a href="#" class="size-4 rounded hover:bg-purple-200/70 flex items-center justify-center focus:ring-2 focus:ring-purple-500/20 dark:hover:bg-purple-500/20 group">
      <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-purple-800 hover:cursor-pointer group-hover:text-purple-800 dark:text-purple-400 dark:group-hover:text-purple-200" %>
    </a>
  </div>

  <!-- Pink -->
  <div class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
    <span class="flex-1">Pink</span>
    <a href="#" class="size-4 rounded hover:bg-pink-200/70 flex items-center justify-center focus:ring-2 focus:ring-pink-500/20 group dark:hover:bg-pink-500/20">
      <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-pink-800 hover:cursor-pointer group-hover:text-pink-800 dark:text-pink-400 dark:group-hover:text-pink-200" %>
    </a>
  </div>

  <!-- White -->
  <div class="rounded bg-white-100 text-slate-800 border border-slate-200 font-medium leading-tight dark:border-none dark:bg-white/10 dark:text-white/80 pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
    <span class="flex-1">White</span>
    <a href="#" class="size-4 rounded hover:bg-slate-200 dark:hover:bg-white/20 flex items-center justify-center focus:ring-2 focus:ring-slate-500/20">
      <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-slate-800 hover:cursor-pointer group-hover:text-slate-700/80
dark:text-white/80 dark:group-hover:text-white/80
" %>
    </a>
  </div>

<!-- Gray -->
<div class="rounded bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs dark:bg-neutral-500/20 dark:text-neutral-200 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Gray</span>
  <a href="#" class="size-4 rounded hover:bg-neutral-200 dark:hover:bg-neutral-500/40 flex items-center justify-center focus:ring-2 focus:ring-neutral-300/50 group">
    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-neutral-700 dark:text-neutral-400 hover:cursor-pointer dark:group-hover:text-neutral-300 group-hover:text-neutral-500" %>
  </a>
</div>

<!-- Red -->
<div class="rounded bg-red-100 text-red-800 font-medium px-2 py-1 text-xs dark:bg-red-500/20 dark:text-red-200 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Red</span>
  <a href="#" class="size-4 rounded hover:bg-red-200 dark:hover:bg-red-500/40 flex items-center justify-center focus:ring-2 focus:ring-red-300/50 group">
    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-red-500 dark:text-red-500/90 hover:cursor-pointer dark:group-hover:text-red-200 group-hover:text-red-500" %>
  </a>
</div>

<!-- Orange -->
<div class="rounded bg-orange-100 text-orange-700 font-medium text-xs dark:text-orange-300 px-2 dark:bg-orange-500/20 pl-2 pr-1 py-1  inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Orange</span>
  <a href="#" class="size-4 rounded hover:bg-orange-200 dark:hover:bg-orange-500/40 flex items-center justify-center focus:ring-2 focus:ring-orange-300/50 group">
    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-red-700 dark:text-orange-500 hover:cursor-pointer dark:group-hover:text-orange-200 group-hover:text-orange-500" %>
  </a>
</div>

<!-- Yellow -->
<div class="rounded bg-yellow-100 text-yellow-700 font-medium dark:text-yellow-300 dark:bg-yellow-500/20 px-2 py-1 text-xs  pl-2 pr-1 inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Yellow</span>
  <a href="#" class="size-4 rounded hover:bg-yellow-200 dark:hover:bg-yellow-500/40 flex items-center justify-center focus:ring-2 focus:ring-yellow-300/50 group">
    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-yellow-800 dark:text-yellow-500 hover:cursor-pointer
group-hover:text-yellow-600
dark:group-hover:text-yellow-200" %>
  </a>
</div>

<!-- Green -->
<div class="rounded bg-green-100 text-green-800 font-medium py-1 text-xs dark:text-green-300 dark:bg-green-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Green</span>
  <a href="#" class="size-4 rounded hover:bg-green-200/70 dark:hover:bg-green-500/40 flex items-center justify-center focus:ring-2 focus:ring-green-500/20 group">
    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-green-700 hover:cursor-pointer
dark:text-green-400
dark:group-hover:text-green-200 group-hover:text-green-800" %>
  </a>
</div>

<!-- Blue -->
<div class="rounded bg-blue-100 text-blue-800 font-medium leading-tight text-xs dark:text-blue-300 dark:bg-blue-500/20 pl-2 pr-1 py-1 inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Blue</span>
  <a href="#" class="size-4 rounded hover:bg-blue-200/70 dark:hover:bg-blue-500/40 flex items-center justify-center focus:ring-2 focus:ring-blue-500/20 group">
    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-blue-800 hover:cursor-pointer group-hover:text-blue-800 dark:text-blue-400
dark:group-hover:text-blue-200" %>
  </a>
</div>

<!-- Indigo -->
<div class="rounded bg-indigo-100 text-indigo-800 font-medium py-1 leading-tight dark:text-indigo-300 dark:bg-indigo-500/20 pl-2 pr-1 text-xs inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Indigo</span>
  <a href="#" class="size-4 rounded hover:bg-indigo-200/70 dark:hover:bg-indigo-500/20 flex items-center justify-center focus:ring-2 focus:ring-indigo-500/20 group">
    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-indigo-800 hover:cursor-pointer group-hover:text-indigo-800
dark:text-indigo-400
dark:group-hover:text-indigo-200" %>
  </a>
</div>

<!-- Purple -->
<div class="rounded bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs dark:text-purple-300 dark:bg-purple-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Purple</span>
  <a href="#" class="size-4 rounded hover:bg-purple-200/70 flex items-center justify-center focus:ring-2 focus:ring-purple-500/20 dark:hover:bg-purple-500/20 group">
    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-purple-800 hover:cursor-pointer group-hover:text-purple-800 dark:text-purple-400 dark:group-hover:text-purple-200" %>
  </a>
</div>

<!-- Pink -->
<div class="rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs dark:text-pink-300 dark:bg-pink-500/20 pl-2 pr-1 inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Pink</span>
  <a href="#" class="size-4 rounded hover:bg-pink-200/70 flex items-center justify-center focus:ring-2 focus:ring-pink-500/20 group dark:hover:bg-pink-500/20">
    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-pink-800 hover:cursor-pointer group-hover:text-pink-800 dark:text-pink-400 dark:group-hover:text-pink-200" %>
  </a>
</div>

<!-- White -->
<div class="rounded bg-white-100 text-slate-800 border border-slate-200 font-medium leading-tight dark:border-none dark:bg-white/10 dark:text-white/80 pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">White</span>
  <a href="#" class="size-4 rounded hover:bg-slate-200 dark:hover:bg-white/20 flex items-center justify-center focus:ring-2 focus:ring-slate-500/20">
    <%= icon "x-mark", class:  "size-3 flex-shrink-0 text-slate-800 hover:cursor-pointer group-hover:text-slate-700/80 dark:text-white/80 dark:group-hover:text-white/80" %>
  </a>
</div>

/ Gray
.rounded.bg-neutral-100.text-neutral-800.font-medium.px-2.py-1.text-xs.dark:text-neutral-200.pl-2.pr-1.inline-flex.items-center.justify-between.space-x-1{class: "dark:bg-neutral-500/20"}
  %span.flex-1 Gray
    %a.size-4.rounded.hover:bg-neutral-200.flex.items-center.justify-center.focus:ring-2.group{class: "dark:hover:bg-neutral-500/40 focus:ring-neutral-300/50", href: "#"}
      = icon "x-mark", class:  "size-3 flex-shrink-0 text-neutral-700 dark:text-neutral-400 hover:cursor-pointer dark:group-hover:text-neutral-300 group-hover:text-neutral-500"
/ Red
.rounded.bg-red-100.text-red-800.font-medium.px-2.py-1.text-xs.dark:text-red-200.pl-2.pr-1.inline-flex.items-center.justify-between.space-x-1{class: "dark:bg-red-500/20"}
  %span.flex-1 Red
    %a.size-4.rounded.hover:bg-red-200.flex.items-center.justify-center.focus:ring-2.group{class: "dark:hover:bg-red-500/40 focus:ring-red-300/50", href: "#"}
      = icon "x-mark", class:  "size-3 flex-shrink-0 text-red-500 dark:text-red-500/90 hover:cursor-pointer dark:group-hover:text-red-200 group-hover:text-red-500"
/ Orange
.rounded.bg-orange-100.text-orange-700.font-medium.text-xs.dark:text-orange-300.px-2.pl-2.pr-1.py-1.inline-flex.items-center.justify-between.space-x-1{class: "dark:bg-orange-500/20"}
  %span.flex-1 Orange
    %a.size-4.rounded.hover:bg-orange-200.flex.items-center.justify-center.focus:ring-2.group{class: "dark:hover:bg-orange-500/40 focus:ring-orange-300/50", href: "#"}
      = icon "x-mark", class:  "size-3 flex-shrink-0 text-red-700 dark:text-orange-500 hover:cursor-pointer dark:group-hover:text-orange-200 group-hover:text-orange-500"
/ Yellow
.rounded.bg-yellow-100.text-yellow-700.font-medium.dark:text-yellow-300.px-2.py-1.text-xs.pl-2.pr-1.inline-flex.items-center.justify-between.space-x-1{class: "dark:bg-yellow-500/20"}
  %span.flex-1 Yellow
    %a.size-4.rounded.hover:bg-yellow-200.flex.items-center.justify-center.focus:ring-2.group{class: "dark:hover:bg-yellow-500/40 focus:ring-yellow-300/50", href: "#"}
      = icon "x-mark", class:  "size-3 flex-shrink-0 text-yellow-800 dark:text-yellow-500 hover:cursor-pointer group-hover:text-yellow-600 dark:group-hover:text-yellow-200"
/ Green
.rounded.bg-green-100.text-green-800.font-medium.py-1.text-xs.dark:text-green-300.pl-2.pr-1.inline-flex.items-center.justify-between.space-x-1{class: "dark:bg-green-500/20"}
  %span.flex-1 Green
    %a.size-4.rounded.flex.items-center.justify-center.focus:ring-2.group{class: "hover:bg-green-200/70 dark:hover:bg-green-500/40 focus:ring-green-500/20", href: "#"}
      = icon "x-mark", class:  "size-3 flex-shrink-0 text-green-700 hover:cursor-pointer dark:text-green-400 dark:group-hover:text-green-200 group-hover:text-green-800"
/ Blue
.rounded.bg-blue-100.text-blue-800.font-medium.leading-tight.text-xs.dark:text-blue-300.pl-2.pr-1.py-1.inline-flex.items-center.justify-between.space-x-1{class: "dark:bg-blue-500/20"}
  %span.flex-1 Blue
    %a.size-4.rounded.flex.items-center.justify-center.focus:ring-2.group{class: "hover:bg-blue-200/70 dark:hover:bg-blue-500/40 focus:ring-blue-500/20", href: "#"}
      = icon "x-mark", class:  "size-3 flex-shrink-0 text-blue-800 hover:cursor-pointer group-hover:text-blue-800 dark:text-blue-400 dark:group-hover:text-blue-200"
/ Indigo
.rounded.bg-indigo-100.text-indigo-800.font-medium.py-1.leading-tight.dark:text-indigo-300.pl-2.pr-1.text-xs.inline-flex.items-center.justify-between.space-x-1{class: "dark:bg-indigo-500/20"}
  %span.flex-1 Indigo
    %a.w-4.h-4.rounded.flex.items-center.justify-center.focus:ring-2.group{class: "hover:bg-indigo-200/70 dark:hover:bg-indigo-500/20 focus:ring-indigo-500/20", href: "#"}
      = icon "x-mark", class:  "size-3 flex-shrink-0 text-indigo-800 hover:cursor-pointer group-hover:text-indigo-800 dark:text-indigo-400 dark:group-hover:text-indigo-200"
/ Purple
.rounded.bg-purple-100.text-purple-800.font-medium.px-2.py-1.leading-tight.text-xs.dark:text-purple-300.pl-2.pr-1.inline-flex.items-center.justify-between.space-x-1{class: "dark:bg-purple-500/20"}
  %span.flex-1 Purple
    %a.size-4.rounded.flex.items-center.justify-center.focus:ring-2.group{class: "hover:bg-purple-200/70 focus:ring-purple-500/20 dark:hover:bg-purple-500/20", href: "#"}
      = icon "x-mark", class:  "size-3 flex-shrink-0 text-purple-800 hover:cursor-pointer group-hover:text-purple-800 dark:text-purple-400 dark:group-hover:text-purple-200"
/ Pink
.rounded.bg-pink-100.text-pink-800.font-medium.px-2.py-1.leading-tight.text-xs.dark:text-pink-300.pl-2.pr-1.inline-flex.items-center.justify-between.space-x-1{class: "dark:bg-pink-500/20"}
  %span.flex-1 Pink
    %a.size-4.rounded.flex.items-center.justify-center.focus:ring-2.group{class: "hover:bg-pink-200/70 focus:ring-pink-500/20 dark:hover:bg-pink-500/20", href: "#"}
      = icon "x-mark", class:  "size-3 flex-shrink-0 text-pink-800 hover:cursor-pointer group-hover:text-pink-800 dark:text-pink-400 dark:group-hover:text-pink-200"
/ White
.rounded.bg-white-100.text-slate-800.border.border-slate-200.font-medium.leading-tight.dark:border-none.pl-2.pr-1.py-1.text-xs.group.inline-flex.items-center.justify-between.space-x-1{class: "dark:bg-white/10 dark:text-white/80"}
  %span.flex-1 White
    %a.size-4.rounded.hover:bg-slate-200.flex.items-center.justify-center.focus:ring-2{class: "dark:hover:bg-white/20 focus:ring-slate-500/20", href: "#"}
      = icon "x-mark", class:  "size-3 flex-shrink-0 text-slate-800 hover:cursor-pointer group-hover:text-slate-700/80 dark:text-white/80 dark:group-hover:text-white/80"