spancountdownbeginner

Countdown Badge

An urgency badge with a clock icon and countdown text, ideal for limited-time offers.

Preview

Ends in 2h 15m

<span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-red-600 text-white text-xs font-bold rounded-lg">
  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
  Ends in 2h 15m
</span>

Color Breakdown

Background

bg-red-600

#dc2626

Text

text-white

#ffffff

Dark Mode Variant

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

dark:bg-red-700

Use Cases

Flash sale bannersLimited-time offersEvent countdown labels

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

Progress Badge

span - beginner

Build Your Own Color Recipe

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

Frequently Asked Questions

How do I make the countdown dynamic?▼

Use JavaScript setInterval to update the text content every second, calculating remaining time from a target date.