<h3 class="text-lg">badges</h3>
<span
  class="text-sm font-medium bg-green-100 py-1 px-2 rounded text-green-500 align-middle"
  >Paid</span
>
<span
  class="text-sm font-medium bg-red-100 py-1 px-2 rounded text-red-500 align-middle"
  >Overdue</span
>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600"
  >Primary</span
>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600"
  >Secondary</span
>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600"
  >Success</span
>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600"
  >Danger</span
>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400"
  >Warning</span
>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300"
  >Info</span
>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200"
  >Light</span
>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900"
  >Dark</span
>
<h3 class="text-lg">closable badges</h3>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-blue-600">
  Primary
  <span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-600">
  Secondary
  <span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-green-600">
  Success
  <span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-red-600">
  Danger
  <span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-yellow-400">
  Warning
  <span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-indigo-300">
  Info
  <span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-black bg-gray-200">
  Light<span class="ml-2 text-base cursor-pointer">×</span>
</span>
<span class="rounded-sm py-1 px-2 text-xs font-medium text-white bg-gray-900">
  Dark
  <span class="ml-2 text-base cursor-pointer">×</span>
</span>
