spanstatusbeginner

Status Badge

Colored status badges with a pulsing dot indicator for active/inactive/pending states.

Preview

Active Pending Offline

<div class="flex gap-3">
  <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-green-100 text-green-700 text-xs font-semibold rounded-full">
    <span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
    Active
  </span>
  <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-yellow-100 text-yellow-700 text-xs font-semibold rounded-full">
    <span class="w-2 h-2 bg-yellow-500 rounded-full"></span>
    Pending
  </span>
  <span class="inline-flex items-center gap-1.5 px-3 py-1 bg-red-100 text-red-700 text-xs font-semibold rounded-full">
    <span class="w-2 h-2 bg-red-500 rounded-full"></span>
    Offline
  </span>
</div>

Color Breakdown

Active BG

bg-green-100

#dcfce7

Active Text

text-green-700

#15803d

Active Dot

bg-green-500

#22c55e

Pending BG

bg-yellow-100

#fef9c3

Pending Text

text-yellow-700

#a16207

Offline BG

bg-red-100

#fee2e2

Offline Text

text-red-700

#b91c1c

Dark Mode Variant

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

dark:bg-green-900/30 dark:text-green-400 dark:bg-yellow-900/30 dark:text-yellow-400 dark:bg-red-900/30 dark:text-red-400

Use Cases

User online statusOrder trackingServer health monitoring

Browser Support

All modern browsers.

Related Recipes

Loading Button

button - intermediate

Gradient 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 remove the pulsing animation?▼

Remove the animate-pulse class from the dot span element.