Chip

<div class="flex justify-center p-6">
  <a
    href="#"
    class="inline-flex rounded-full border border-gray-300 bg-white px-3 py-1 text-sm font-medium text-gray-900 transition hover:bg-gray-100"
  >
    Chip
  </a>
</div>

<div class="flex justify-center p-6">
  <span
    class="inline-flex items-center space-x-1 rounded-full border border-gray-300 bg-white py-1 pl-3 pr-2 text-sm font-medium text-gray-900 transition hover:bg-gray-100"
  >
    <span>Chip</span>
    <button>
      <!-- Herocions name: micro/x-mark -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
        <path
          d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
        />
      </svg>
    </button>
  </span>
</div>

<div class="flex justify-center p-6">
  <span
    class="inline-flex items-center space-x-1 rounded-full border border-gray-300 bg-white px-2 py-1 text-sm font-medium text-gray-900 transition hover:bg-gray-100"
  >
    <!-- Herocions name: micro/bookmark -->
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
      <path d="M3.75 2a.75.75 0 0 0-.75.75v10.5a.75.75 0 0 0 1.28.53L8 10.06l3.72 3.72a.75.75 0 0 0 1.28-.53V2.75a.75.75 0 0 0-.75-.75h-8.5Z" />
    </svg>
    <span>Bookmark</span>
    <button>
      <!-- Herocions name: micro/x-mark -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
        <path
          d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
        />
      </svg>
    </button>
  </span>
</div>

<div class="flex justify-center p-6">
  <span class="inline-flex rounded border border-gray-300 bg-white text-sm font-medium text-gray-900">
    <span class="inline-block px-3 py-1">Bread</span>
    <button class="border-l border-inherit px-1 transition hover:bg-gray-100">
      <!-- Herocions name: micro/x-mark -->
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
        <path
          d="M5.28 4.22a.75.75 0 0 0-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 1 0 1.06 1.06L8 9.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L9.06 8l2.72-2.72a.75.75 0 0 0-1.06-1.06L8 6.94 5.28 4.22Z"
        />
      </svg>
    </button>
  </span>
</div>

<div class="flex justify-center p-6">
  <a
    href="#"
    class="inline-flex items-center rounded-full border border-gray-300 bg-white p-1 font-medium text-gray-900 transition hover:bg-gray-100"
  >
    <div class="-m-px flex size-6 shrink-0 items-center justify-center rounded-full bg-gray-900 text-xs text-white">12</div>
    <span class="px-2 text-sm">Broccoli</span>
  </a>
</div>