Badge

<div class="flex flex-wrap justify-center space-x-2">
  <span class="rounded-full bg-primary-50 px-2 py-1 text-xs font-semibold text-primary-600"> Badge </span>
  <span class="rounded-full bg-green-50 px-2 py-1 text-xs font-semibold text-green-600"> Badge </span>
  <span class="rounded-full bg-yellow-50 px-2 py-1 text-xs font-semibold text-yellow-600"> Badge </span>
  <span class="rounded-full bg-red-50 px-2 py-1 text-xs font-semibold text-red-600"> Badge </span>
  <span class="rounded-full bg-gray-100 px-2 py-1 text-xs font-semibold text-gray-600"> Badge </span>
  <span class="rounded-full bg-black px-2 py-1 text-xs font-semibold text-white"> Badge </span>
</div>

<div class="flex flex-wrap justify-center space-x-2">
  <span class="rounded-full bg-primary-50 px-3 py-1 text-sm font-semibold text-primary-600"> Badge </span>
  <span class="rounded-full bg-green-50 px-3 py-1 text-sm font-semibold text-green-600"> Badge </span>
  <span class="rounded-full bg-yellow-50 px-3 py-1 text-sm font-semibold text-yellow-600"> Badge </span>
  <span class="rounded-full bg-red-50 px-3 py-1 text-sm font-semibold text-red-600"> Badge </span>
  <span class="rounded-full bg-gray-100 px-3 py-1 text-sm font-semibold text-gray-600"> Badge </span>
  <span class="rounded-full bg-black px-3 py-1 text-sm font-semibold text-white"> Badge </span>
</div>

<div class="flex flex-wrap items-center justify-center space-x-2">
  <span class="rounded-md bg-primary-50 px-2 py-1 text-xs font-semibold text-primary-600"> Badge </span>
  <span class="rounded-md bg-primary-50 px-3 py-1 text-sm font-semibold text-primary-600"> Badge </span>
</div>

<div class="flex flex-wrap items-center justify-center space-x-2">
  <span class="inline-flex items-center rounded-full bg-primary-50 px-2 py-1 text-xs font-semibold text-primary-600">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3">
      <path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
        clip-rule="evenodd"
      />
    </svg>
    Badge
  </span>
  <span class="inline-flex items-center rounded-full bg-primary-50 px-3 py-1 text-sm font-semibold text-primary-600">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-4 w-4">
      <path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
        clip-rule="evenodd"
      />
    </svg>
    Badge
  </span>
  <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-3 w-3">
      <path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
        clip-rule="evenodd"
      />
    </svg>
    Badge
  </span>
  <span class="inline-flex items-center rounded-md bg-green-50 px-3 py-1 text-sm font-semibold text-green-600">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="mr-1 h-4 w-4">
      <path
        fill-rule="evenodd"
        d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
        clip-rule="evenodd"
      />
    </svg>
    Badge
  </span>
</div>

<div class="flex flex-wrap items-center justify-center space-x-2">
  <span class="inline-flex items-center rounded-full bg-primary-50 px-2 py-1 text-xs font-semibold text-primary-600">
    Badge
    <button class="ml-1">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3 opacity-80">
        <path
          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
        />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center rounded-full bg-primary-50 px-3 py-1 text-sm font-semibold text-primary-600">
    Badge
    <button class="ml-1">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 opacity-80">
        <path
          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
        />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-semibold text-green-600">
    Badge
    <button class="ml-1">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-3 w-3 opacity-80">
        <path
          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
        />
      </svg>
    </button>
  </span>
  <span class="inline-flex items-center rounded-md bg-green-50 px-3 py-1 text-sm font-semibold text-green-600">
    Badge
    <button class="ml-1">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="h-4 w-4 opacity-80">
        <path
          d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
        />
      </svg>
    </button>
  </span>
</div>