Tailwind CSS: Red Notification Badge with a Count
The example below shows you how to create red notification badges with counts in Tailwind CSS. The point here is to use the relative and absolute utility classes to place a badge in the top right of its parent element.
Screenshot:

The code:
<body class="p-20">
<h1 class="text-3xl mb-10">KindaCode.com - Notification Badges with Counts</h1>
<!-- Normal button with badge count -->
<button class="relative px-5 py-3 bg-teal-600 text-white drop-shadow hover:bg-teal-700 duration-300">
Messages
<span
class="absolute top-0 right-0 px-3 py-2 translate-x-1/2 -translate-y-1/2 bg-red-500 rounded-full text-xs text-white">3</span>
</button>
<!-- Icons with notification badges -->
<div class="mt-10 px-5 py-3 bg-blue-700 drop-shadow-md space-x-8">
<a href="#" class="relative inline-block text-6xl text-white">
♥
<span
class="absolute top-0 right-0 px-2 py-1 translate-x-1/2 bg-red-500 border border-white rounded-full text-xs text-white">12</span>
</a>
<a href="#" class="relative inline-block text-6xl text-white">
$
<span
class="absolute top-0 right-0 px-2 py-1 translate-x-1/2 bg-red-500 rounded-full text-xs text-white">6</span>
</a>
<a href="#" class="relative inline-block text-6xl text-white">
★
<span class="absolute top-0 right-0 px-2 py-1 translate-x-1/2 bg-red-500 rounded-full text-xs text-white">
9
</span>
</a>
</div>
</body>
Further reading:
- Tailwind CSS + Font Awesome: Loading Button Examples
- How to Create a Hero Image with Tailwind CSS
- Tailwind CSS: Create Image Hover Overlay Effects
- Tailwind CSS: How to Create an Off-Canvas Side Menu
- How to Zoom on Hover with Tailwind CSS (the easiest approach)
- Tailwind CSS: Create an Image Carousel/Slideshow
You can also check out our CSS category page for the latest tutorials and examples.
Subscribe
0 Comments