Tailwind CSS Badge

Badges often used to highlight an item's status to notify the user.

Basic

Badge Badge Badge Badge Badge Badge 
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-green-600 text-white font-semibold">Badge</span>
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-yellow-500 text-white font-semibold">Badge</span>
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-red-600 text-white font-semibold">Badge</span>
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-cyan-200 text-white font-semibold">Badge</span>
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-gray-200 text-gray-800 font-semibold">Badge</span>
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-gray-900 text-white font-semibold">Badge</span>

Soft Colors

Badge Badge Badge Badge Badge 
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-green-100 text-green-800 border border-green-200 font-semibold">Badge</span>
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-yellow-100 text-yellow-800 border border-yellow-200 font-semibold">Badge</span>
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-red-100 text-red-800 border border-red-200 font-semibold">Badge</span>
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-cyan-100 text-cyan-800 border border-cyan-200 font-semibold">Badge</span>
<span class="inline-block p-2 text-sm align-baseline leading-none rounded bg-gray-200 text-gray-800 border border-gray-200 font-semibold">Badge</span>

Notification Badge

<a href="#!" class="relative inline-block">
	<svg
		xmlns="http://www.w3.org/2000/svg"
		class="icon icon-tabler icon-tabler-heart"
		width="24"
		height="24"
		viewBox="0 0 24 24"
		stroke-width="2"
		stroke="currentColor"
		fill="none"
		stroke-linecap="round"
		stroke-linejoin="round"
	>
		<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
		<path d="M19.5 12.572l-7.5 7.428l-7.5 -7.428a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"></path>
	</svg>
	<span class="absolute top-0 -mt-1 left-full rounded-full h-5 w-5 -ml-2 bg-green-600 text-white text-center font-semibold text-sm">
		5
		<span class="invisible">unread messages</span>
	</span>
</a>