Flat With Remove Button

export default function Example() {
  return (
    <>
      <span className="inline-flex items-center gap-x-0.5 rounded-md bg-gray-100 px-2 py-1 text-xs font-medium text-gray-600 dark:bg-gray-400/10 dark:text-gray-400">
        Badge
        <button
          type="button"
          className="group relative -mr-1 size-3.5 rounded-xs hover:bg-gray-500/20 dark:hover:bg-gray-400/20"
        >
          <span className="sr-only">Remove</span>
          <svg
            viewBox="0 0 14 14"
            className="size-3.5 stroke-gray-700/50 group-hover:stroke-gray-700/75 dark:stroke-gray-400 dark:group-hover:stroke-gray-300"
          >
            <path d="M4 4l6 6m0-6l-6 6" />
          </svg>
          <span className="absolute -inset-1" />
        </button>
      </span>
      <span className="inline-flex items-center gap-x-0.5 rounded-md bg-red-100 px-2 py-1 text-xs font-medium text-red-700 dark:bg-red-400/10 dark:text-red-400">
        Badge
        <button
          type="button"
          className="group relative -mr-1 size-3.5 rounded-xs hover:bg-red-600/20 dark:hover:bg-red-400/20"
        >
          <span className="sr-only">Remove</span>
          <svg
            viewBox="0 0 14 14"
            className="size-3.5 stroke-red-700/50 group-hover:stroke-red-700/75 dark:stroke-red-400 dark:group-hover:stroke-red-300"
          >
            <path d="M4 4l6 6m0-6l-6 6" />
          </svg>
          <span className="absolute -inset-1" />
        </button>
      </span>
      <span className="inline-flex items-center gap-x-0.5 rounded-md bg-yellow-100 px-2 py-1 text-xs font-medium text-yellow-800 dark:bg-yellow-400/10 dark:text-yellow-500">
        Badge
        <button
          type="button"
          className="group relative -mr-1 size-3.5 rounded-xs hover:bg-yellow-600/20 dark:hover:bg-yellow-400/20"
        >
          <span className="sr-only">Remove</span>
          <svg
            viewBox="0 0 14 14"
            className="size-3.5 stroke-yellow-800/50 group-hover:stroke-yellow-800/75 dark:stroke-yellow-400 dark:group-hover:stroke-yellow-300"
          >
            <path d="M4 4l6 6m0-6l-6 6" />
          </svg>
          <span className="absolute -inset-1" />
        </button>
      </span>
      <span className="inline-flex items-center gap-x-0.5 rounded-md bg-green-100 px-2 py-1 text-xs font-medium text-green-700 dark:bg-green-400/10 dark:text-green-400">
        Badge
        <button
          type="button"
          className="group relative -mr-1 size-3.5 rounded-xs hover:bg-green-600/20 dark:hover:bg-green-400/20"
        >
          <span className="sr-only">Remove</span>
          <svg
            viewBox="0 0 14 14"
            className="size-3.5 stroke-green-800/50 group-hover:stroke-green-800/75 dark:stroke-green-400 dark:group-hover:stroke-green-300"
          >
            <path d="M4 4l6 6m0-6l-6 6" />
          </svg>
          <span className="absolute -inset-1" />
        </button>
      </span>
      <span className="inline-flex items-center gap-x-0.5 rounded-md bg-blue-100 px-2 py-1 text-xs font-medium text-blue-700 dark:bg-blue-400/10 dark:text-blue-400">
        Badge
        <button
          type="button"
          className="group relative -mr-1 size-3.5 rounded-xs hover:bg-blue-600/20 dark:hover:bg-blue-400/20"
        >
          <span className="sr-only">Remove</span>
          <svg
            viewBox="0 0 14 14"
            className="size-3.5 stroke-blue-800/50 group-hover:stroke-blue-800/75 dark:stroke-blue-400 dark:group-hover:stroke-blue-300"
          >
            <path d="M4 4l6 6m0-6l-6 6" />
          </svg>
          <span className="absolute -inset-1" />
        </button>
      </span>
      <span className="inline-flex items-center gap-x-0.5 rounded-md bg-indigo-100 px-2 py-1 text-xs font-medium text-indigo-700 dark:bg-indigo-400/10 dark:text-indigo-400">
        Badge
        <button
          type="button"
          className="group relative -mr-1 size-3.5 rounded-xs hover:bg-indigo-600/20 dark:hover:bg-indigo-400/20"
        >
          <span className="sr-only">Remove</span>
          <svg
            viewBox="0 0 14 14"
            className="size-3.5 stroke-indigo-700/50 group-hover:stroke-indigo-700/75 dark:stroke-indigo-400 dark:group-hover:stroke-indigo-300"
          >
            <path d="M4 4l6 6m0-6l-6 6" />
          </svg>
          <span className="absolute -inset-1" />
        </button>
      </span>
      <span className="inline-flex items-center gap-x-0.5 rounded-md bg-purple-100 px-2 py-1 text-xs font-medium text-purple-700 dark:bg-purple-400/10 dark:text-purple-400">
        Badge
        <button
          type="button"
          className="group relative -mr-1 size-3.5 rounded-xs hover:bg-purple-600/20 dark:hover:bg-purple-400/20"
        >
          <span className="sr-only">Remove</span>
          <svg
            viewBox="0 0 14 14"
            className="size-3.5 stroke-violet-700/50 group-hover:stroke-violet-700/75 dark:stroke-violet-400 dark:group-hover:stroke-violet-300"
          >
            <path d="M4 4l6 6m0-6l-6 6" />
          </svg>
          <span className="absolute -inset-1" />
        </button>
      </span>
      <span className="inline-flex items-center gap-x-0.5 rounded-md bg-pink-100 px-2 py-1 text-xs font-medium text-pink-700 dark:bg-pink-400/10 dark:text-pink-400">
        Badge
        <button
          type="button"
          className="group relative -mr-1 size-3.5 rounded-xs hover:bg-pink-600/20 dark:hover:bg-pink-400/20"
        >
          <span className="sr-only">Remove</span>
          <svg
            viewBox="0 0 14 14"
            className="size-3.5 stroke-pink-800/50 group-hover:stroke-pink-800/75 dark:stroke-pink-400 dark:group-hover:stroke-pink-300"
          >
            <path d="M4 4l6 6m0-6l-6 6" />
          </svg>
          <span className="absolute -inset-1" />
        </button>
      </span>
    </>
  )
}