spanprogressbeginner

Progress Badge

A badge showing completion percentage with a small inline progress bar.

Preview

75%

<span class="inline-flex items-center gap-2 px-3 py-1.5 bg-gray-100 rounded-full">
  <div class="w-16 h-1.5 bg-gray-300 rounded-full overflow-hidden">
    <div class="h-full bg-blue-600 rounded-full" style="width: 75%"></div>
  </div>
  <span class="text-xs font-semibold text-gray-700">75%</span>
</span>

Color Breakdown

Badge BG

bg-gray-100

#f3f4f6

Track

bg-gray-300

#d1d5db

Fill

bg-blue-600

#2563eb

Label

text-gray-700

#374151

Dark Mode Variant

Add these Tailwind classes for a dark mode adaptation of this recipe.

dark:bg-gray-800 dark:bg-gray-600 dark:text-gray-300

Use Cases

Course completion badgesProfile completenessTask progress indicators

Browser Support

All modern browsers.

Related Recipes

Gradient Badge

span - beginner

Status Badge

span - beginner

Notification Dot

span - beginner

Pill Tag

span - beginner

Outlined Tag

span - beginner

Countdown Badge

span - beginner

Build Your Own Color Recipe

Use our Tailwind CSS tools to experiment with colors, gradients, and component styles.

Explore Tools

Frequently Asked Questions

How do I change the color based on completion?▼

Use conditional classes: bg-red-500 for <33%, bg-yellow-500 for 33-66%, bg-green-500 for >66%.