How To Add Badge Components Using Tailwind CSS?

Last Updated : 25 Sep, 2024

Badges are versatile UI components that display notifications, counts, or statuses. Web applications use them extensively to enhance user experience by providing visual cues. Whether you are creating a social media platform, a notification system, or an e-commerce application, badges help improve interaction by highlighting key information.

Prerequisites

Steps To Add Badge Components

Step 1: Install Node.js and NPM

node -v
npm -v

Step 2: Initialize the Project

Create a new folder for your project, navigate to it in your terminal, and run:

mkdir myprojects
cd myprojects
npm init -y

Step 3: Install Tailwind CSS

npm install tailwindcss
npx tailwindcss init

Step 4: Configure Tailwind

module.exports = {
    content: ["./src/**/*.{html,js}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

Step 5: Create a CSS File for Tailwind

In the src/ folder, create a styles.css file, and add the following lines to include Tailwind's base, components, and utilities:

@tailwind base;
@tailwind components;
@tailwind utilities;

Project Structure:

Dependencies

"dependencies": {
    "tailwindcss": "^3.4.13"
}

Example: Now that the project is set up, let’s move on to writing the HTML and Tailwind CSS code for the badge components. Open the index.html file and add the following example code for different types of badges:

HTML

<!-- index.html -->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Badge Components using Tailwind CSS</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>

<body class="bg-gray-100 p-8 flex flex-col items-center">
    <h1 class="text-3xl font-bold text-green-500 text-center mb-4">
      GeeksforGeeks</h1>
    <h2 class="text-2xl font-bold text-black text-center mb-8">
      Badge Components using Tailwind CSS</h2>

    <div class="space-y-8 w-full max-w-2xl">
        <!-- Notification Badges -->
        <section class="flex flex-col items-center">
            <h2 class="text-xl font-semibold mb-4">Notification Badges</h2>
            <div class="space-x-4">
                <button class="bg-blue-500 text-white px-4 py-2 rounded relative">
                    Inbox
                    <span
                        class="absolute -top-1 -right-1 bg-red-500
                               text-white text-xs font-bold px-2 py-1
                               rounded-full">3</span>
                </button>
                <button class="bg-gray-500 text-white px-4 py-2 rounded relative">
                    Notifications
                    <span
                        class="absolute -top-1 -right-1 bg-green-500
                               text-white text-xs font-bold px-2 py-1
                               rounded-full">New</span>
                </button>
            </div>
        </section>

        <!-- Status Badges -->
        <section class="flex flex-col items-center">
            <h2 class="text-xl font-semibold mb-4">Status Badges</h2>
            <div class="space-x-2">
                <span class="bg-green-500 text-white text-xs font-medium 
                             px-2.5 py-0.5 rounded-full">Online</span>
                <span class="bg-red-500 text-white text-xs font-medium 
                             px-2.5 py-0.5 rounded-full">Offline</span>
                <span class="bg-yellow-500 text-black text-xs font-medium 
                             px-2.5 py-0.5 rounded-full">Away</span>
            </div>
        </section>

        <!-- Label Badges -->
        <section class="flex flex-col items-center">
            <h2 class="text-xl font-semibold mb-4">Label Badges</h2>
            <div class="space-x-2">
                <span class="bg-blue-100 text-blue-800 text-xs font-medium 
                             px-2.5 py-0.5 rounded">Feature</span>
                <span class="bg-red-100 text-red-800 text-xs font-medium 
                             px-2.5 py-0.5 rounded">Bug</span>
                <span class="bg-green-100 text-green-800 text-xs font-medium 
                             px-2.5 py-0.5 rounded">Improvement</span>
            </div>
        </section>

        <!-- Interactive Badges -->
        <section class="flex flex-col items-center">
            <h2 class="text-xl font-semibold mb-4">Interactive Badges</h2>
            <div class="space-x-2">
                <a href="#"
                    class="bg-purple-500 text-white text-xs
                           font-medium px-2.5 py-0.5 rounded
                           hover:bg-purple-600 transition duration-300">
                    Click me
                </a>
                <button
                    class="bg-indigo-500 text-white text-xs 
                           font-medium px-2.5 py-0.5 rounded 
                           hover:bg-indigo-600 transition duration-300">
                    Hover me
                </button>
            </div>
        </section>
    </div>
</body>

</html>

JavaScript

// src/badge.js

document.addEventListener('DOMContentLoaded', () => {
    // Example: Update notification badge count
    const notificationBadge = document.querySelector('#notificationBadge');
    let count = 3;

    setInterval(() => {
        count = (count % 5) + 1;  // Cycle between 1 and 5
        notificationBadge.textContent = count;
    }, 3000);

    // Example: Click handler for clickable badge
    const clickableBadge = document.querySelector('#clickableBadge');
    clickableBadge.addEventListener('click', (e) => {
        e.preventDefault();
        alert('Badge clicked!');
    });
});

To Run the Application

npx tailwindcss -i ./src/styles.css -o ./Public/output.css --watch

This command watches your styles.css file and outputs the compiled CSS into Public/output.css.

Once the Tailwind CSS is compiled, open the index.html file in a browser to see your badge components in action.

Output:

How to Add New Colors in Tailwind CSS ?

harshitadvzmz

Improve

Article Tags :