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:
Folder StructureDependencies
"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>
// 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:
Badge components using Tailwind CSS
Similar Reads
How to Add Avatar Components using Tailwind CSS?
An avatar is a graphical representation of a user or identity, often used in web applications to represent individuals in profiles, comments, or chat systems. This article will guide you through creating customizable avatar components using Tailwind CSS, a utility-first CSS framework that allows for
10 min read
How to Build a Card component using Tailwind CSS ?
In this article, we will learn about how to Build a card component using Tailwind CSS, Tailwind CSS is a CSS framework that helps in building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. Tailwind CSS creates small util
4 min read
How to Create Badges using HTML and CSS ?
This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that
2 min read
How to create a Chevron using Tailwind CSS ?
A Chevron is a basic geometric shape that is used in websites to indicate directional movements or navigation. By utilizing specific border properties and transformations, a chevron shape can be achieved without the need for custom CSS. Tailwind's utility-first approach allows for a straightforward
3 min read
How to centre an Element using Tailwind CSS ?
Tailwind CSS follows a utility-first approach, which means that instead of writing custom CSS for each component, we can utilize pre-defined classes that apply specific styles directly to HTML elements. We can center an element by using the utility classes of "margin" and "flex". This article will g
3 min read
Create Progress Bar Component using React and Tailwind CSS
A progress bar is a visual representation of progress in a process. It is commonly used in web applications to indicate the completion status of an operation. In this article, we will learn how to create a progress bar component in React using Tailwind CSS for styling. PrerequisitesJavaScriptReactTa
2 min read
Create a To Do List using Tailwind CSS
A To-Do List serves as a task organization tool, enabling users to compile, prioritize, and oversee their tasks, facilitating efficiency and productivity in their completion. In this endeavor, we'll construct a To-Do list leveraging Tailwind CSS. Our approach involves crafting the layout or componen
3 min read
How To Add Gradient Background With Tailwind?
Gradient backgrounds are a common design element that can give your website depth and visual appeal. You can make both linear and radial gradients with Tailwind CSS without writing any custom CSS. With minimal effort, you can apply stunning gradients to your elements by using Tailwind's utility clas
2 min read
How to use Badge Component in ReactJS?
Badge generates a small badge to the top-right of its children component. Material UI for React has this component available for us, and it is very easy to integrate. We can use the Badge Component in ReactJS using the following approach. Prerequisites:NodeJS or NPMReact JSMaterial UISteps to Create
2 min read
How to Create Animated Loading Button using Tailwind CSS ?
An Animated Loading Button is a button that displays a loading spinner or animation to indicate an ongoing process, such as form submission. Using Tailwind CSS, you can create this by combining utility classes for styling and animations to visually enhance the button during loading. Table of Content
2 min read