Badge

<div className="inline-flex items-center rounded-md border border-transparent bg-neutral-800 px-2.5 py-0.5 text-xs font-semibold text-neutral-200 transition-colors">
  Badge
</div>

<div className="inline-flex items-center rounded-md border border-transparent bg-zinc-600 px-2.5 py-0.5 text-xs font-semibold text-zinc-100 transition-colors">
  Badge
</div>

<div className="inline-flex items-center rounded-md border border-transparent bg-red-900/80 px-2.5 py-0.5 text-xs font-semibold text-red-300 transition-colors">
  Badge
</div>

<div className="inline-flex items-center rounded-md border border-white/20 px-2.5 py-0.5 text-xs font-semibold text-white transition-colors">
  Badge
</div>

import { CheckCircleIcon } from '@heroicons/react/24/solid'

<div className="inline-flex items-center gap-1.5 rounded-md border border-green-500/50 bg-green-950/30 px-2.5 py-0.5 text-xs font-semibold text-green-300 transition-colors">
  <CheckCircleIcon className="size-3.5" />
  <span>Verified</span>
</div>

import { EnvelopeIcon } from '@heroicons/react/24/outline'

<div className="relative inline-block">
  <EnvelopeIcon className="size-8 text-white" />
  <span className="absolute top-0 right-0 block h-2.5 w-2.5 rounded-full bg-red-500 ring-2 ring-black" />
</div>