spanpill-tagbeginner

Pill Tag

A rounded pill tag with a soft background, commonly used for categories or labels.

Preview

React Vue Svelte Angular

<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-medium rounded-full">React</span>
  <span class="px-3 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full">Vue</span>
  <span class="px-3 py-1 bg-purple-100 text-purple-700 text-xs font-medium rounded-full">Svelte</span>
  <span class="px-3 py-1 bg-orange-100 text-orange-700 text-xs font-medium rounded-full">Angular</span>
</div>

Color Breakdown

Blue Tag BG

bg-blue-100

#dbeafe

Blue Tag Text

text-blue-700

#1d4ed8

Green Tag BG

bg-green-100

#dcfce7

Green Tag Text

text-green-700

#15803d

Purple Tag BG

bg-purple-100

#f3e8ff

Purple Tag Text

text-purple-700

#7e22ce

Dark Mode Variant

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

dark:bg-blue-900/30 dark:text-blue-300 dark:bg-green-900/30 dark:text-green-300

Use Cases

Blog post tagsSkill labelsCategory filters

Browser Support

All modern browsers.

Related Recipes

Pill Button

button - beginner

Pill Search Bar

input - beginner

Gradient Badge

span - beginner

Status Badge

span - beginner

Notification Dot

span - beginner

Outlined Tag

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 make tags removable?▼

Add a small X button inside the span with ml-1 text-blue-500 hover:text-blue-700 and handle click with JavaScript.