Badges (Tags)
Ready to use Tailwind CSS badge (also known as tag) components with production-ready, copy-paste HTML code. Use them as they are, or as a starting point to build beautiful websites.
Badges, sometimes called tags or chips, are those small label things that show status, categories, counts, or just metadata. We have a decent set: solid filled, soft/light background, outline style, with and without a dot indicator, with a remove button, and pill vs. slightly rounded shapes. They come in a handful of colors and sizes. Small components but you end up needing them in a lot of places once you start building a real UI.
Tailwind
<span class="rounded-md bg-gray-50 px-1.5 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200">Badge</span>
<span class="rounded-md bg-yellow-50 px-1.5 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-300">Badge</span>
<span class="rounded-md bg-red-50 px-1.5 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200">Badge</span>
<span class="rounded-md bg-green-50 px-1.5 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">Badge</span>
<span class="rounded-md bg-sky-50 px-1.5 py-1 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-200">Badge</span>
<span class="rounded-md bg-blue-50 px-1.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-200">Badge</span>
<span class="rounded-md bg-indigo-50 px-1.5 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200">Badge</span>
<span class="rounded-md bg-purple-50 px-1.5 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-200">Badge</span>
<span class="rounded-md bg-pink-50 px-1.5 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-200">Badge</span>
<span class="rounded-md bg-orange-50 px-1.5 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200">Badge</span><span class="rounded-md bg-gray-500/10 px-1.5 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-200/10">Badge</span>
<span class="rounded-md bg-yellow-500/10 px-1.5 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-yellow-300/10">Badge</span>
<span class="rounded-md bg-red-500/10 px-1.5 py-1 text-xs font-medium text-red-600 ring-1 ring-inset ring-red-200/10">Badge</span>
<span class="rounded-md bg-green-500/10 px-1.5 py-1 text-xs font-medium text-green-600 ring-1 ring-inset ring-green-200/10">Badge</span>
<span class="rounded-md bg-sky-500/10 px-1.5 py-1 text-xs font-medium text-sky-500 ring-1 ring-inset ring-sky-200/10">Badge</span>
<span class="rounded-md bg-blue-500/10 px-1.5 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-200/10">Badge</span>
<span class="rounded-md bg-indigo-500/10 px-1.5 py-1 text-xs font-medium text-indigo-400 ring-1 ring-inset ring-indigo-200/10">Badge</span>
<span class="rounded-md bg-purple-500/10 px-1.5 py-1 text-xs font-medium text-purple-500 ring-1 ring-inset ring-purple-200/10">Badge</span>
<span class="rounded-md bg-pink-500/10 px-1.5 py-1 text-xs font-medium text-pink-600 ring-1 ring-inset ring-pink-200/10">Badge</span>
<span class="rounded-md bg-orange-500/10 px-1.5 py-1 text-xs font-medium text-orange-600 ring-1 ring-inset ring-orange-200/10">Badge</span><span class="inline-flex items-center gap-x-1 rounded-md bg-gray-50 px-1.5 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200">
<svg class="h-2 w-2 text-gray-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-yellow-50 px-1.5 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-300">
<svg class="h-2 w-2 text-yellow-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-red-50 px-1.5 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200">
<svg class="h-2 w-2 text-red-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-green-50 px-1.5 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">
<svg class="h-2 w-2 text-green-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-sky-50 px-1.5 py-1 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-200">
<svg class="h-2 w-2 text-sky-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-blue-50 px-1.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-200">
<svg class="h-2 w-2 text-blue-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-indigo-50 px-1.5 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200">
<svg class="h-2 w-2 text-indigo-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-purple-50 px-1.5 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-200">
<svg class="h-2 w-2 text-purple-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-pink-50 px-1.5 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-200">
<svg class="h-2 w-2 text-pink-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-orange-50 px-1.5 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200">
<svg class="h-2 w-2 text-orange-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span><span class="inline-flex items-center gap-x-1 rounded-md bg-gray-500/10 px-1.5 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-200/10">
<svg class="h-2 w-2 text-gray-300" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-yellow-500/10 px-1.5 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-yellow-300/10">
<svg class="h-2 w-2 text-yellow-400" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-red-500/10 px-1.5 py-1 text-xs font-medium text-red-600 ring-1 ring-inset ring-red-200/10">
<svg class="h-2 w-2 text-red-400" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-green-500/10 px-1.5 py-1 text-xs font-medium text-green-600 ring-1 ring-inset ring-green-200/10">
<svg class="h-2 w-2 text-green-400" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-sky-500/10 px-1.5 py-1 text-xs font-medium text-sky-500 ring-1 ring-inset ring-sky-200/10">
<svg class="h-2 w-2 text-sky-300" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-blue-500/10 px-1.5 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-200/10">
<svg class="h-2 w-2 text-blue-300" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-indigo-500/10 px-1.5 py-1 text-xs font-medium text-indigo-400 ring-1 ring-inset ring-indigo-200/10">
<svg class="h-2 w-2 text-indigo-300" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-purple-500/10 px-1.5 py-1 text-xs font-medium text-purple-500 ring-1 ring-inset ring-purple-200/10">
<svg class="h-2 w-2 text-purple-300" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-pink-500/10 px-1.5 py-1 text-xs font-medium text-pink-600 ring-1 ring-inset ring-pink-200/10">
<svg class="h-2 w-2 text-pink-400" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-orange-500/10 px-1.5 py-1 text-xs font-medium text-orange-600 ring-1 ring-inset ring-orange-200/10">
<svg class="h-2 w-2 text-orange-400" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span><span class="inline-flex items-center gap-x-0.5 rounded-md bg-gray-50 px-1.5 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200">
Badge
<button type="button" class="relative -mr-[3px] flex h-4 w-4 items-center justify-center rounded-sm text-gray-400 hover:bg-gray-200 hover:text-gray-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-yellow-50 px-1.5 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-300">
Badge
<button type="button" class="relative -mr-[3px] flex h-4 w-4 items-center justify-center rounded-sm text-yellow-400 hover:bg-yellow-200 hover:text-yellow-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-red-50 px-1.5 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200">
Badge
<button type="button" class="relative -mr-[3px] flex h-4 w-4 items-center justify-center rounded-sm text-red-400 hover:bg-red-200 hover:text-red-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-green-50 px-1.5 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">
Badge
<button type="button" class="relative -mr-[3px] flex h-4 w-4 items-center justify-center rounded-sm text-green-400 hover:bg-green-200 hover:text-green-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-sky-50 px-1.5 py-1 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-200">
Badge
<button type="button" class="relative -mr-[3px] flex h-4 w-4 items-center justify-center rounded-sm text-sky-400 hover:bg-sky-200 hover:text-sky-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-blue-50 px-1.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-200">
Badge
<button type="button" class="relative -mr-[3px] flex h-4 w-4 items-center justify-center rounded-sm text-blue-400 hover:bg-blue-200 hover:text-blue-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-indigo-50 px-1.5 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200">
Badge
<button type="button" class="relative -mr-[3px] flex h-4 w-4 items-center justify-center rounded-sm text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-purple-50 px-1.5 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-200">
Badge
<button type="button" class="relative -mr-[3px] flex h-4 w-4 items-center justify-center rounded-sm text-purple-400 hover:bg-purple-200 hover:text-purple-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-pink-50 px-1.5 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-200">
Badge
<button type="button" class="relative -mr-[3px] flex h-4 w-4 items-center justify-center rounded-sm text-pink-400 hover:bg-pink-200 hover:text-pink-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-md bg-orange-50 px-1.5 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200">
Badge
<button type="button" class="relative -mr-[3px] flex h-4 w-4 items-center justify-center rounded-sm text-orange-400 hover:bg-orange-200 hover:text-orange-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span><span class="inline-flex items-center gap-x-1 rounded-md bg-gray-50 px-1.5 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200">
<img class="-ml-0.5 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-yellow-50 px-1.5 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-300">
<img class="-ml-0.5 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-red-50 px-1.5 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200">
<img class="-ml-0.5 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-green-50 px-1.5 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">
<img class="-ml-0.5 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-sky-50 px-1.5 py-1 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-200">
<img class="-ml-0.5 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-blue-50 px-1.5 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-200">
<img class="-ml-0.5 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-indigo-50 px-1.5 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200">
<img class="-ml-0.5 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-purple-50 px-1.5 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-200">
<img class="-ml-0.5 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-pink-50 px-1.5 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-200">
<img class="-ml-0.5 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-md bg-orange-50 px-1.5 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200">
<img class="-ml-0.5 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span><span class="rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200">Badge</span>
<span class="rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-300">Badge</span>
<span class="rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200">Badge</span>
<span class="rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">Badge</span>
<span class="rounded-full bg-sky-50 px-2 py-1 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-200">Badge</span>
<span class="rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-200">Badge</span>
<span class="rounded-full bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200">Badge</span>
<span class="rounded-full bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-200">Badge</span>
<span class="rounded-full bg-pink-50 px-2 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-200">Badge</span>
<span class="rounded-full bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200">Badge</span><span class="rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-200/10">Badge</span>
<span class="rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-yellow-300/10">Badge</span>
<span class="rounded-full bg-red-500/10 px-2 py-1 text-xs font-medium text-red-600 ring-1 ring-inset ring-red-200/10">Badge</span>
<span class="rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-600 ring-1 ring-inset ring-green-200/10">Badge</span>
<span class="rounded-full bg-sky-500/10 px-2 py-1 text-xs font-medium text-sky-500 ring-1 ring-inset ring-sky-200/10">Badge</span>
<span class="rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-200/10">Badge</span>
<span class="rounded-full bg-indigo-500/10 px-2 py-1 text-xs font-medium text-indigo-400 ring-1 ring-inset ring-indigo-200/10">Badge</span>
<span class="rounded-full bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 ring-1 ring-inset ring-purple-200/10">Badge</span>
<span class="rounded-full bg-pink-500/10 px-2 py-1 text-xs font-medium text-pink-600 ring-1 ring-inset ring-pink-200/10">Badge</span>
<span class="rounded-full bg-orange-500/10 px-2 py-1 text-xs font-medium text-orange-600 ring-1 ring-inset ring-orange-200/10">Badge</span><span class="inline-flex items-center gap-x-1 rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200">
<svg class="-ml-0.5 h-2 w-2 text-gray-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-300">
<svg class="-ml-0.5 h-2 w-2 text-yellow-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200">
<svg class="-ml-0.5 h-2 w-2 text-red-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">
<svg class="-ml-0.5 h-2 w-2 text-green-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-sky-50 px-2 py-1 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-200">
<svg class="-ml-0.5 h-2 w-2 text-sky-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-200">
<svg class="-ml-0.5 h-2 w-2 text-blue-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200">
<svg class="-ml-0.5 h-2 w-2 text-indigo-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-200">
<svg class="-ml-0.5 h-2 w-2 text-purple-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-pink-50 px-2 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-200">
<svg class="-ml-0.5 h-2 w-2 text-pink-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200">
<svg class="-ml-0.5 h-2 w-2 text-orange-500" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span><span class="inline-flex items-center gap-x-1 rounded-full bg-gray-500/10 px-2 py-1 text-xs font-medium text-gray-400 ring-1 ring-inset ring-gray-200/10">
<svg class="-ml-0.5 h-2 w-2 text-gray-300" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-yellow-500/10 px-2 py-1 text-xs font-medium text-yellow-600 ring-1 ring-inset ring-yellow-300/10">
<svg class="-ml-0.5 h-2 w-2 text-yellow-400" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-red-500/10 px-2 py-1 text-xs font-medium text-red-600 ring-1 ring-inset ring-red-200/10">
<svg class="-ml-0.5 h-2 w-2 text-red-400" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-green-500/10 px-2 py-1 text-xs font-medium text-green-600 ring-1 ring-inset ring-green-200/10">
<svg class="-ml-0.5 h-2 w-2 text-green-400" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-sky-500/10 px-2 py-1 text-xs font-medium text-sky-500 ring-1 ring-inset ring-sky-200/10">
<svg class="-ml-0.5 h-2 w-2 text-sky-300" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-blue-500/10 px-2 py-1 text-xs font-medium text-blue-400 ring-1 ring-inset ring-blue-200/10">
<svg class="-ml-0.5 h-2 w-2 text-blue-300" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-indigo-500/10 px-2 py-1 text-xs font-medium text-indigo-400 ring-1 ring-inset ring-indigo-200/10">
<svg class="-ml-0.5 h-2 w-2 text-indigo-300" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-purple-500/10 px-2 py-1 text-xs font-medium text-purple-500 ring-1 ring-inset ring-purple-200/10">
<svg class="-ml-0.5 h-2 w-2 text-purple-300" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-pink-500/10 px-2 py-1 text-xs font-medium text-pink-600 ring-1 ring-inset ring-pink-200/10">
<svg class="-ml-0.5 h-2 w-2 text-pink-400" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-orange-500/10 px-2 py-1 text-xs font-medium text-orange-600 ring-1 ring-inset ring-orange-200/10">
<svg class="-ml-0.5 h-2 w-2 text-orange-400" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<circle cx="4" cy="4" r="3" fill="currentColor" />
</svg>
Badge
</span><span class="inline-flex items-center gap-x-0.5 rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200">
Badge
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center rounded-full text-gray-400 hover:bg-gray-200 hover:text-gray-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-300">
Badge
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center rounded-full text-yellow-400 hover:bg-yellow-200 hover:text-yellow-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200">
Badge
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center rounded-full text-red-400 hover:bg-red-200 hover:text-red-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">
Badge
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center rounded-full text-green-400 hover:bg-green-200 hover:text-green-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-full bg-sky-50 px-2 py-1 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-200">
Badge
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center rounded-full text-sky-400 hover:bg-sky-200 hover:text-sky-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-200">
Badge
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center rounded-full text-blue-400 hover:bg-blue-200 hover:text-blue-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-full bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200">
Badge
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center rounded-full text-indigo-400 hover:bg-indigo-200 hover:text-indigo-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-full bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-200">
Badge
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center rounded-full text-purple-400 hover:bg-purple-200 hover:text-purple-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-full bg-pink-50 px-2 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-200">
Badge
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center rounded-full text-pink-400 hover:bg-pink-200 hover:text-pink-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span>
<span class="inline-flex items-center gap-x-0.5 rounded-full bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200">
Badge
<button type="button" class="relative -mr-[5px] flex h-4 w-4 items-center justify-center rounded-full text-orange-400 hover:bg-orange-200 hover:text-orange-500">
<span class="sr-only">Close</span>
<svg class="h-3 w-3" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M3 9L9 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
<path d="M9.00124 8.99992L3.002 3.00189" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
</svg>
<span class="absolute -inset-1"></span>
</button>
</span><span class="inline-flex items-center gap-x-1 rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-700 ring-1 ring-inset ring-gray-200">
<img class="-ml-1 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-yellow-50 px-2 py-1 text-xs font-medium text-yellow-700 ring-1 ring-inset ring-yellow-300">
<img class="-ml-1 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-inset ring-red-200">
<img class="-ml-1 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-inset ring-green-200">
<img class="-ml-1 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-sky-50 px-2 py-1 text-xs font-medium text-sky-700 ring-1 ring-inset ring-sky-200">
<img class="-ml-1 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-200">
<img class="-ml-1 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-200">
<img class="-ml-1 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-purple-50 px-2 py-1 text-xs font-medium text-purple-700 ring-1 ring-inset ring-purple-200">
<img class="-ml-1 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-pink-50 px-2 py-1 text-xs font-medium text-pink-700 ring-1 ring-inset ring-pink-200">
<img class="-ml-1 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>
<span class="inline-flex items-center gap-x-1 rounded-full bg-orange-50 px-2 py-1 text-xs font-medium text-orange-700 ring-1 ring-inset ring-orange-200">
<img class="-ml-1 h-4 w-4 rounded-full object-cover" src="https://flagcdn.com/gb.svg" width="16" height="16" alt="UK flag" />
Badge
</span>Frequently asked questions
-
Solid fill, soft background, outline/ghost, with a colored dot, with an X remove button, pill shape, and slightly rounded. Multiple color options.
-
The remove variants have a small X button inside the badge. Just wire up a click handler in JavaScript to remove the element from the DOM, something like button.closest('.badge').remove().
-
Yes. They work well as clickable filter tags, add a hover state and a click handler and you're most of the way there.
-
Yes, same thing. Different frameworks call them different things, badges, chips, tags, pills. Same pattern.
Related Tailwind CSS components
More free, copy-paste Tailwind CSS components to use in your projects.