Tailwind Tools:
Button Generator
Table Tool
Modal Generator
Cards
Alerts
Progress
More
▼
Dropdown
Accordion
Popover
Tooltips
Pagination
Badges
Breadcrumbs
Text Maker
Link Maker
☰
Button Generator
Table Tool
Cards
Alerts
Progress
More
▼
Pagination
Dropdown
Badges
Breadcrumbs
Text Maker
Link Maker
Tailwind Badge Generator
Customize and generate beautiful badges
Badge Options
Badge Type
Choose the shape style of your badge
Standard
Pill
Badge Color
Select the background color of your badge
Primary (Blue)
Secondary (Gray)
Success (Green)
Danger (Red)
Warning (Yellow)
Info (Indigo)
Light (White)
Dark (Black)
Pink
Purple
Badge Text Color
Choose auto (contrast based) or custom text color
Auto
Custom
White
Black
Gray
Red
Blue
Green
Yellow
Indigo
Purple
Pink
Badge Size
Choose the size of the badge
Default
Small
Large
Badge Content
Text or number to display in the badge
Attach To Element
Type of element to attach the badge to
Text
Button
Link
Badge Position
Positioning style for the badge
Relative
Absolute
Badge Inside Element
Place badge inside or outside the element
Place inside
Badge Border
Add a border to the badge
Add border
Badge Shadow
Add a shadow effect to the badge
Add shadow
Custom Classes
Add additional Tailwind classes
Preview
Generated Code
Copy Code
Instructions about using Badge Creation Tool
1
Enter the text for Badge in "Badge Content". For example, a number (1, 2, 3) or text (test).
2
Set the color of the badge by using the "Badge Color" option.
3
Specify the Badge Size from the given options.
4
Set the badge Shape and Types from the "Badge Type" option.
5
When satisfied, press the “Copy Code” button to grab the code.