Tailwind CSS 3.4
Badges & Progress
Badges for status indicators and progress bars for completion tracking
Badge Colors
Tailwind color palette applied to badges:
DefaultGrayBlueGreenYellowRedIndigoPurplePink
Badge Usage Examples
Common use cases for badges in interfaces:
Status Indicators
ActivePendingInactiveError
Notification Counters
Messages 5
Notifications 12
Updates 3
Badges in Buttons
Progress Bars
Progress bars showing completion percentages:
Not Started: 0%
In Progress: 25%
Halfway: 50%
Almost Done: 75%
Complete: 100%
Progress Bar Colors
Progress bars with different colors for various contexts:
Upload Progress (Blue)
Task Completion (Green)
Memory Usage (Yellow)
Storage Critical (Red)
← Back to Tailwind CSS Components
Explore all 5 component categories