Myna UI

Badges

<span class="rounded-full border border-gray-100 bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800"> Badge </span>
<span class="rounded border border-gray-100 bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800"> Badge </span>

<span class="rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800"> Badge </span>
<span class="rounded border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800"> Badge </span>
Badge Badge Badge Badge
<span class="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800"> Badge </span>
<span class="rounded-full bg-red-100 px-3 py-1 text-xs font-medium text-red-800"> Badge </span>
<span class="rounded-full bg-yellow-100 px-3 py-1 text-xs font-medium text-yellow-800"> Badge </span>
<span class="rounded-full bg-green-100 px-3 py-1 text-xs font-medium text-green-800"> Badge </span>
<span class="rounded-full bg-blue-100 px-3 py-1 text-xs font-medium text-blue-800"> Badge </span>
<span class="rounded-full bg-indigo-100 px-3 py-1 text-xs font-medium text-indigo-800"> Badge </span>
<span class="rounded-full bg-purple-100 px-3 py-1 text-xs font-medium text-purple-800"> Badge </span>
<span class="rounded-full bg-pink-100 px-3 py-1 text-xs font-medium text-pink-800"> Badge </span>
Badge Badge Badge Badge Badge Badge Badge Badge
<span
  class="flex items-center space-x-1.5 rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-gray-600"></span>
  <span>Badge</span>
</span>
<span
  class="flex items-center space-x-1.5 rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-red-600"></span>
  <span>Badge</span>
</span>
<span
  class="flex items-center space-x-1.5 rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-green-600"></span>
  <span>Badge</span>
</span>
<span
  class="flex items-center space-x-1.5 rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  <span class="-ml-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-amber-600"></span>
  <span>Badge</span>
</span>
Badge Badge Badge Badge
<span class="flex items-center rounded-full border border-gray-200 px-3 py-1 text-xs font-medium text-gray-800">
  <span>Badge</span>
  <button type="button" class="group ml-1 -mr-0.5 shrink-0 rounded-full">
    <svg class="h-3 w-3 stroke-gray-600 group-hover:stroke-black" viewBox="0 0 256 256">
      <line x1="200" y1="56" x2="56" y2="200" stroke-linecap="round" stroke-linejoin="round" stroke-width="26"></line>
      <line x1="200" y1="200" x2="56" y2="56" stroke-linecap="round" stroke-linejoin="round" stroke-width="26"></line>
    </svg>
  </button>
</span>
<span
  class="flex items-center rounded-full border border-gray-100 bg-gray-100 px-3 py-1 text-xs font-medium text-gray-800">
  <span>Badge</span>
  <button type="button" class="group ml-1 -mr-0.5 shrink-0 rounded-full">
    <svg class="h-3 w-3 stroke-gray-600 group-hover:stroke-black" viewBox="0 0 256 256">
      <line x1="200" y1="56" x2="56" y2="200" stroke-linecap="round" stroke-linejoin="round" stroke-width="26"></line>
      <line x1="200" y1="200" x2="56" y2="56" stroke-linecap="round" stroke-linejoin="round" stroke-width="26"></line>
    </svg>
  </button>
</span>
Badge Badge
<span class="h-2 w-2 shrink-0 rounded-full bg-gray-500"></span>
<span class="h-2 w-2 shrink-0 rounded-full bg-emerald-500"></span>
<span class="h-2 w-2 shrink-0 rounded-full bg-red-500"></span>
<span class="relative flex h-2 w-2">
  <span class="absolute h-full w-full shrink-0 animate-ping rounded-full bg-blue-500"></span>
  <span class="h-full w-full shrink-0 rounded-full bg-blue-500"></span>
</span>
<span class="h-2 w-2 shrink-0 rounded-full bg-yellow-500"></span>
<span class="shrink-0 rounded-full bg-gray-500 px-1 font-mono text-xs font-medium tracking-tight text-white"> 57 </span>
<span class="shrink-0 rounded-full bg-emerald-500 px-1 font-mono text-xs font-medium tracking-tight text-white">
  2
</span>
<span class="shrink-0 rounded-full bg-red-500 px-1 font-mono text-xs font-medium tracking-tight text-white"> 293 </span>
<span class="shrink-0 rounded-full bg-blue-500 px-1 font-mono text-xs font-medium tracking-tight text-white">
  14k
</span>
<span class="shrink-0 rounded-full bg-yellow-500 px-1 font-mono text-xs font-medium tracking-tight text-white">
  0
</span>
57 2 293 14k 0