Home
Nick Girga
Elegant Badges

Elegant Badges

Useful Tailwind classes for creating several types of basic badges.

This tailwind example is contributed by Nick Girga, on 02-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Badge

Author Nick Girga

336

Fork Fullscreen

<div class="flex flex-col items-center justify-center gap-4 my-8">

<div class="flex flex-row items-center gap-2">

<span class="badge">Default</span>

<span class="badge badge-primary">Primary</span>

<span class="badge badge-secondary">Secondary</span>

<span class="badge badge-info">Info</span>

</div>

<div class="flex flex-row items-center gap-2">

<span class="badge badge-success">Success</span>

<span class="badge badge-warn">Warn</span>

<span class="badge badge-error">Error</span>

<span class="badge bg-orange-400 text-blue-800 cursor-pointer hover:bg-blue-800 hover:text-orange-400 transition duration-300">Custom</span>

</div>

</div>

Related Examples

Notification Badge

Author:
Mr Robot

3 years ago

10.1k
chip
Interactive and customizable chips or tags to display labels, categories, or filters. Includes options for removable chips with icons and different styles.

Author:
Abhiraj

7 months ago

1.1k
Bordered badges

Author:
Anonymous

1 year ago

7.7k
Badge with border

Author:
Steven Kuhn

2 years ago

12.2k
Badges for showing statuses

Author:
Mohit Prajapati

3 years ago

9.9k
Badges - Htmlwind
Basic badges

Author:
Htmlwind

2 months ago

218
Tags list
click to remove the tag from list

Author:
Asher Wilde

2 years ago

10.9k
Timeline
timeline with journey

Author:
Abhiraj

7 months ago

769
Badges without border

Author:
Prajwal Hallale

2 years ago

7.4k
Badges (Multicolor)

Author:
Mr Robot

2 years ago

9.5k
Icon Notification Badge with Count

Author:
Arya

2 years ago

13.9k
Hashtag Pills
Minimal hastag cloud

Author:
TailwindFlex

2 years ago

12.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1