Badge

<div class="p-6">
  <span class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full bg-gray-900 px-2 text-sm font-medium text-white"> New </span>
</div>

<div class="flex flex-col items-start space-y-6 p-6">
  <span class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full bg-red-500 px-2 text-sm font-medium text-white"> 342 </span>
  <span class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full bg-sky-500 px-2 text-sm font-medium text-white"> +199 </span>
  <span class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full bg-fuchsia-500 px-2 text-sm font-medium text-white">
    Best Seller
  </span>
  <span class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full bg-green-500 px-2 text-sm font-medium text-white">
    Completed
  </span>
  <span
    class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full border border-red-200 bg-red-100 px-2 text-sm font-medium text-red-600"
  >
    Updated
  </span>
  <span
    class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full border border-sky-200 bg-sky-100 px-2 text-sm font-medium text-sky-600"
  >
    284
  </span>
  <span
    class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full border border-green-200 bg-green-100 px-2 text-sm font-medium text-green-600"
  >
    Beta
  </span>
  <span
    class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full border border-fuchsia-200 bg-fuchsia-100 px-2 text-sm font-medium text-fuchsia-600"
  >
    PRO
  </span>
  <span
    class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full border border-orange-300 bg-orange-100 px-2 text-sm font-medium text-black"
  >
    In progress
  </span>
  <span
    class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full border border-gray-300 bg-gray-100 px-2 text-sm font-medium text-black"
  >
    Deprecated
  </span>
  <span
    class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full bg-gradient-to-br from-amber-400 to-lime-400 px-2 text-sm font-medium text-black"
  >
    New
  </span>
  <span
    class="inline-flex h-5 shrink-0 items-center whitespace-nowrap rounded-full bg-gradient-to-r from-fuchsia-400 to-rose-400 px-2 text-sm font-medium text-white"
  >
    Coming soon
  </span>
</div>

<div class="p-6">
  <span
    class="inline-flex h-6 shrink-0 items-center whitespace-nowrap rounded-full border border-purple-300 bg-purple-100 px-2 text-sm font-medium text-purple-600"
  >
    <!-- Herocions name: mini/beaker -->
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-4 w-4 shrink-0">
      <path
        fill-rule="evenodd"
        d="M8.5 3.528v4.644c0 .729-.29 1.428-.805 1.944l-1.217 1.216a8.75 8.75 0 013.55.621l.502.201a7.25 7.25 0 004.178.365l-2.403-2.403a2.75 2.75 0 01-.805-1.944V3.528a40.205 40.205 0 00-3 0zm4.5.084l.19.015a.75.75 0 10.12-1.495 41.364 41.364 0 00-6.62 0 .75.75 0 00.12 1.495L7 3.612v4.56c0 .331-.132.649-.366.883L2.6 13.09c-1.496 1.496-.817 4.15 1.403 4.475C5.961 17.852 7.963 18 10 18s4.039-.148 5.997-.436c2.22-.325 2.9-2.979 1.403-4.475l-4.034-4.034A1.25 1.25 0 0113 8.172v-4.56z"
        clip-rule="evenodd"
      />
    </svg>
    Experimental
  </span>
</div>