Badge, Tag, and Pill Patterns

Badges are small inline labels. In Tailwind, they're a span with display, padding, rounded, and color classes. Variants are entirely color and shape changes.

Status badges

<span class="inline-flex items-center gap-1.5 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
  <span class="w-1.5 h-1.5 rounded-full bg-green-500"></span>
  Active
</span>

<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">Failed</span>

<span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-700">Pending</span>

Removable tag

<span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-md text-xs
  font-medium bg-blue-50 text-blue-700 border border-blue-200">
  React
  <button class="ml-1 text-blue-500 hover:text-blue-700">x</button>
</span>

Notification count

<span class="inline-flex items-center justify-center w-5 h-5 text-xs
  font-bold text-white bg-red-500 rounded-full">
  9
</span>

The pattern bg-{color}-100 text-{color}-800 is the standard for accessible soft badge colors — light background, dark text from the same family. It passes WCAG contrast ratios in most cases.