Tailwind CSS: Red Notification Badge with a Count

Last updated on July 6, 2022 Pennywise Loading... Post a comment

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">
            &hearts;
            <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">
            &dollar;
            <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">
            &starf;
            <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:

You can also check out our CSS category page for the latest tutorials and examples.

0 Comments

Inline Feedbacks

View all comments

Tailwind CSS: Red Notification Badge with a Count

You May Also Like