Badges

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

<%= content_tag :span, "Gray", class: "rounded bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Red", class: "rounded bg-red-100 text-red-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Orange", class: "rounded bg-orange-100 text-orange-700 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Yellow", class: "rounded bg-neutral-100 text-yellow-700 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Green", class: "rounded bg-green-100 text-green-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Blue", class: "rounded bg-blue-100 text-blue-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Indigo", class: "rounded bg-indigo-100 text-indigo-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Purple", class: "rounded bg-purple-100 text-purple-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Pink", class: "rounded bg-pink-100 text-pink-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "White", class: "rounded bg-white-100 text-slate-800 border border-slate-200 font-medium px-2 py-1 leading-tight text-xs dark:bg-white-10 dark:text-white" %>

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

<span class="rounded-full bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs">Gray</span>
<span class="rounded-full bg-red-100 text-red-800 font-medium px-2 py-1 text-xs">Red</span>
<span class="rounded-full bg-orange-100 text-orange-700 font-medium px-2 py-1 text-xs">Orange</span>
<span class="rounded-full bg-yellow-100 text-yellow-700 font-medium px-2 py-1 text-xs">Yellow</span>
<span class="rounded-full bg-green-100 text-green-800 font-medium px-2 py-1 text-xs">Green</span>
<span class="rounded-full bg-blue-100 text-blue-800 font-medium px-2 py-1 leading-tight text-xs">Blue</span>
<span class="rounded-full bg-indigo-100 text-indigo-800 font-medium px-2 py-1 leading-tight text-xs">Indigo</span>
<span class="rounded-full bg-purple-100 text-purple-800 font-medium px-2 py-1 leading-tight text-xs">Purple</span>
<span class="rounded-full bg-pink-100 text-pink-800 font-medium px-2 py-1 leading-tight text-xs">Pink</span>
<span class="rounded-full bg-white text-slate-800 border border-slate-200 font-medium px-2 py-1 leading-tight text-xs">White</span>

<%= content_tag :span, "Gray", class: "rounded-full bg-neutral-100 text-neutral-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Red", class: "rounded-full bg-red-100 text-red-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Orange", class: "rounded-full bg-orange-100 text-orange-700 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Yellow", class: "rounded-full bg-neutral-100 text-yellow-700 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Green", class: "rounded-full bg-green-100 text-green-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Blue", class: "rounded-full bg-blue-100 text-blue-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Indigo", class: "rounded-full bg-indigo-100 text-indigo-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Purple", class: "rounded-full bg-purple-100 text-purple-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "Pink", class: "rounded-full bg-pink-100 text-pink-800 font-medium px-2 py-1 text-xs" %>
<%= content_tag :span, "White", class: "rounded-full bg-white text-slate-800 border border-slate-200 font-medium px-2 py-1 leading-tight text-xs" %>

%span.rounded-full.bg-neutral-100.text-neutral-800.font-medium.px-2.py-1.text-xs Gray
%span.rounded-full.bg-red-100.text-red-800.font-medium.px-2.py-1.text-xs Red
%span.rounded-full.bg-orange-100.text-orange-700.font-medium.px-2.py-1.text-xs Orange
%span.rounded-full.bg-yellow-100.text-yellow-700.font-medium.px-2.py-1.text-xs Yellow
%span.rounded-full.bg-green-100.text-green-800.font-medium.px-2.py-1.text-xs Green
%span.rounded-full.bg-blue-100.text-blue-800.font-medium.px-2.py-1.leading-tight.text-xs Blue
%span.rounded-full.bg-indigo-100.text-indigo-800.font-medium.px-2.py-1.leading-tight.text-xs Indigo
%span.rounded-full.bg-purple-100.text-purple-800.font-medium.px-2.py-1.leading-tight.text-xs Purple
%span.rounded-full.bg-pink-100.text-pink-800.font-medium.px-2.py-1.leading-tight.text-xs Pink
%span.rounded-full.bg-white.text-slate-800.border.border-slate-200.font-medium.px-2.py-1.leading-tight.text-xs White

<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-300 dark:border-neutral-500/40">Gray</span>

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

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

<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-500 dark:bg-yellow-500/20 dark:border-yellow-500/30">Yellow</span>

<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-500 dark:bg-green-500/20 dark:border-green-500/30">Green</span>

<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-400 dark:border-blue-500/40 dark:bg-blue-500/20">Blue</span>

<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-400 dark:border-indigo-400/30 dark:bg-indigo-500/20">Indigo</span>

<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-400 dark:border-purple-400/30 dark:bg-purple-500/20">Purple</span>

<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-500 dark:border-pink-500/40 dark:bg-pink-500/20">Pink</span>

<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">White</span>

<%= tag.span "Gray", 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-300 dark:border-neutral-500/40" %>

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

<%= tag.span "Orange", class: "rounded bg-orange-50/30 text-orange-600 font-medium px-2 py-1 text-xs border border-orange-600/60 dark:bg-orange-500/20 dark:border-orange-500/30 dark:text-orange-400" %>

<%= tag.span "Yellow", 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-500 dark:bg-yellow-500/20 dark:border-yellow-500/30" %>

<%= tag.span "Green", 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-500 dark:bg-green-500/20 dark:border-green-500/30" %>

<%= tag.span "Blue", 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-400 dark:border-blue-500/40 dark:bg-blue-500/20" %>

<%= tag.span "Indigo", 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-400 dark:border-indigo-400/30 dark:bg-indigo-500/20" %>

<%= tag.span "Purple", 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-400 dark:border-purple-400/30 dark:bg-purple-500/20" %>

<%= tag.span "Pink", 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-500 dark:border-pink-500/40 dark:bg-pink-500/20" %>

<%= tag.span "White", 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" %>

%span.rounded.text-neutral-800.font-medium.px-2.py-1.text-xs.border.dark:text-neutral-300{class: "border-neutral-800/60 bg-neutral-50/60 dark:bg-neutral-500/20 dark:border-neutral-500/40"} Gray

%span.rounded.text-red-600.font-medium.px-2.py-1.text-xs.border.dark:text-red-500{class: "bg-red-50/30 border-red-600/60 dark:bg-red-500/20 dark:border-red-500/30"} Red

%span.rounded.text-orange-600.font-medium.px-2.py-1.text-xs.border.dark:text-orange-400{class: "bg-orange-50/30 border-orange-600/60 dark:bg-orange-500/20 dark:border-orange-500/30"} Orange

%span.rounded.text-yellow-700.font-medium.px-2.py-1.text-xs.border.dark:text-yellow-500{class: "bg-yellow-50/30 border-yellow-500/60 dark:bg-yellow-500/20 dark:border-yellow-500/30"} Yellow

%span.rounded.text-green-700.font-medium.px-2.py-1.text-xs.border.dark:text-green-500{class: "bg-green-50/30 border-green-500/60 dark:bg-green-500/20 dark:border-green-500/30"} Green

%span.rounded.text-blue-800.font-medium.px-2.py-1.leading-tight.text-xs.border.dark:text-blue-400{class: "bg-blue-50/30 border-blue-600/60 dark:border-blue-500/40 dark:bg-blue-500/20"} Blue

%span.rounded.text-indigo-800.font-medium.px-2.py-1.leading-tight.text-xs.border.dark:text-indigo-400{class: "bg-indigo-50/30 border-indigo-600/60 dark:border-indigo-400/30 dark:bg-indigo-500/20"} Indigo

%span.rounded.text-purple-800.font-medium.px-2.py-1.leading-tight.text-xs.border.dark:text-purple-400{class: "bg-purple-50/30 border-indigo-600/60 dark:border-purple-400/30 dark:bg-purple-500/20"} Purple

%span.rounded.bg-pink-100.text-pink-800.font-medium.px-2.py-1.leading-tight.text-xs.border.dark:text-pink-500{class: "border-pink-600/60 dark:border-pink-500/40 dark:bg-pink-500/20"} Pink

%span.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 White

<!-- Gray -->
<div class="rounded bg-neutral-100 text-neutral-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Gray</span>
  <a href="#" class="w-4 h-4 rounded group-hover:bg-neutral-200/70 flex items-center justify-center focus:ring-2 focus:ring-neutral-300/50">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-neutral-500 hover:cursor-pointer group-hover:text-neutral-600" %>
  </a>
</div>
<!-- Red -->
<div class="rounded bg-red-100 text-red-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Red</span>
  <a href="#" class="w-4 h-4 rounded group-hover:bg-red-200/70 flex items-center justify-center focus:ring-2 focus:ring-red-300/50">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-red-700 hover:cursor-pointer group-hover:text-red-800" %>
  </a>
</div>
<!-- Orange -->
<div class="rounded bg-orange-100 text-orange-700 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Orange</span>
  <a href="#" class="w-4 h-4 rounded group-hover:bg-orange-200/70 flex items-center justify-center focus:ring-2 focus:ring-orange-300/50">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-orange-700 hover:cursor-pointer group-hover:text-orange-800" %>
  </a>
</div>
<!-- Yellow -->
<div class="rounded bg-yellow-100 text-yellow-700 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Yellow</span>
  <a href="#" class="w-4 h-4 rounded group-hover:bg-yellow-200/70 flex items-center justify-center focus:ring-2 focus:ring-yellow-300/50">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-yellow-700 hover:cursor-pointer group-hover:text-yellow-800" %>
  </a>
</div>
<!-- Green -->
<div class="rounded bg-green-100 text-green-700 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Green</span>
  <a href="#" class="w-4 h-4 rounded group-hover:bg-green-200/70 flex items-center justify-center focus:ring-2 focus:ring-green-500/20">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-green-700 hover:cursor-pointer group-hover:text-green-800" %>
  </a>
</div>
<!-- Blue -->
<div class="rounded bg-blue-100 text-blue-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Blue</span>
  <a href="#" class="w-4 h-4 rounded group-hover:bg-blue-200/70 flex items-center justify-center focus:ring-2 focus:ring-blue-500/20">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-blue-800 hover:cursor-pointer group-hover:text-blue-800" %>
  </a>
</div>
<!-- Indigo -->
<div class="rounded bg-indigo-100 text-indigo-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Indigo</span>
  <a href="#" class="w-4 h-4 rounded group-hover:bg-indigo-200/70 flex items-center justify-center focus:ring-2 focus:ring-indigo-500/20">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-indigo-800 hover:cursor-pointer group-hover:text-indigo-800" %>
  </a>
</div>
<!-- Purple -->
<div class="rounded bg-purple-100 text-purple-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Purple</span>
  <a href="#" class="w-4 h-4 rounded group-hover:bg-purple-200/70 flex items-center justify-center focus:ring-2 focus:ring-purple-500/20">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-purple-800 hover:cursor-pointer group-hover:text-purple-800" %>
  </a>
</div>
<!-- Pink -->
<div class="rounded bg-pink-100 text-pink-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Pink</span>
  <a href="#" class="w-4 h-4 rounded group-hover:bg-pink-200/70 flex items-center justify-center focus:ring-2 focus:ring-pink-500/20">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-pink-800 hover:cursor-pointer group-hover:text-pink-800" %>
  </a>
</div>
<!-- White -->
<div class="rounded bg-white text-slate-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1 border-slate-200 border">
  <span class="flex-1">White</span>
  <a href="#" class="w-4 h-4 rounded group-hover:bg-slate-100 flex items-center justify-center focus:ring-2 focus:ring-slate-500/20">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-slate-800 hover:cursor-pointer group-hover:text-slate-900" %>
  </a>
</div>

<!-- Gray -->
<div class="rounded bg-neutral-100 text-neutral-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Gray</span>
  <%= link_to "#", class: "w-4 h-4 rounded group-hover:bg-neutral-200/70 flex items-center justify-center focus:ring-2 focus:ring-neutral-300/50" do %>
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-neutral-500 hover:cursor-pointer group-hover:text-neutral-600" %>
  <% end %>
</div>
<!-- Red -->
<div class="rounded bg-red-100 text-red-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Red</span>
  <%= link_to "#", class: "w-4 h-4 rounded group-hover:bg-red-200/70 flex items-center justify-center focus:ring-2 focus:ring-red-300/50" do %>
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-red-700 hover:cursor-pointer group-hover:text-red-800" %>
  <% end %>
</div>
<!-- Orange -->
<div class="rounded bg-orange-100 text-orange-700 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Orange</span>
  <a class="w-4 h-4 rounded group-hover:bg-orange-200/70 flex items-center justify-center focus:ring-2 focus:ring-orange-300/50" href="#">
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-orange-700 hover:cursor-pointer group-hover:text-orange-800" %>
</a></div>
<!-- Yellow -->
<div class="rounded bg-yellow-100 text-yellow-700 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Yellow</span>
  <%= link_to "#", class: "w-4 h-4 rounded group-hover:bg-yellow-200/70 flex items-center justify-center focus:ring-2 focus:ring-yellow-300/50" do %>
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-yellow-700 hover:cursor-pointer group-hover:text-yellow-800" %>
  <% end %>
</div>
<!-- Green -->
<div class="rounded bg-green-100 text-green-700 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Green</span>
  <%= link_to "#", class: "w-4 h-4 rounded group-hover:bg-green-200/70 flex items-center justify-center focus:ring-2 focus:ring-green-500/20" do %>
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-green-700 hover:cursor-pointer group-hover:text-green-800" %>
  <% end %>
</div>
<!-- Blue -->
<div class="rounded bg-blue-100 text-blue-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Blue</span>
  <%= link_to "#", class: "w-4 h-4 rounded group-hover:bg-blue-200/70 flex items-center justify-center focus:ring-2 focus:ring-blue-500/20" do %>
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-blue-800 hover:cursor-pointer group-hover:text-blue-800" %>
  <% end %>
</div>
<!-- Indigo -->
<div class="rounded bg-indigo-100 text-indigo-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Indigo</span>
  <%= link_to "#", class: "w-4 h-4 rounded group-hover:bg-indigo-200/70 flex items-center justify-center focus:ring-2 focus:ring-indigo-500/20" do %>
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-indigo-800 hover:cursor-pointer group-hover:text-indigo-800" %>
  <% end %>
</div>
<!-- Purple -->
<div class="rounded bg-purple-100 text-purple-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Purple</span>
  <%= link_to "#", class: "w-4 h-4 rounded group-hover:bg-purple-200/70 flex items-center justify-center focus:ring-2 focus:ring-purple-500/20" do %>
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-purple-800 hover:cursor-pointer group-hover:text-purple-800" %>
  <% end %>
</div>
<!-- Pink -->
<div class="rounded bg-pink-100 text-pink-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1">
  <span class="flex-1">Pink</span>
  <%= link_to "#", class: "w-4 h-4 rounded group-hover:bg-pink-200/70 flex items-center justify-center focus:ring-2 focus:ring-pink-500/20" do %>
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-pink-800 hover:cursor-pointer group-hover:text-pink-800" %>
  <% end %>
</div>
<!-- White -->
<div class="rounded bg-white text-slate-800 font-medium pl-2 pr-1 py-1 text-xs group inline-flex items-center justify-between space-x-1 border-slate-200 border">
  <span class="flex-1">White</span>
  <%= link_to "#", class: "w-4 h-4 rounded group-hover:bg-slate-100 flex items-center justify-center focus:ring-2 focus:ring-slate-500/20" do %>
    <%= icon "x-mark", classes: "w-3 h-3 flex-shrink-0 text-slate-800 hover:cursor-pointer group-hover:text-slate-900" %>
  <% end %>
</div>

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