spanoutlinedbeginner

Outlined Tag

A tag with only a border and text color, no background fill, for a minimal look.

Preview

Design Frontend Backend

<div class="flex flex-wrap gap-2">
  <span class="px-3 py-1 border border-blue-500 text-blue-500 text-xs font-medium rounded-full">Design</span>
  <span class="px-3 py-1 border border-emerald-500 text-emerald-500 text-xs font-medium rounded-full">Frontend</span>
  <span class="px-3 py-1 border border-amber-500 text-amber-500 text-xs font-medium rounded-full">Backend</span>
</div>

Color Breakdown

Blue Border

border-blue-500

#3b82f6

Blue Text

text-blue-500

#3b82f6

Emerald Border

border-emerald-500

#10b981

Emerald Text

text-emerald-500

#10b981

Amber Border

border-amber-500

#f59e0b

Amber Text

text-amber-500

#f59e0b

Dark Mode Variant

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

dark:border-blue-400 dark:text-blue-400

Use Cases

Skill tags on resumesFilter chipsTechnology labels

Browser Support

All modern browsers.

Related Recipes

Ghost Button

button - beginner

Outline Button

button - beginner

Gradient Border Card

card - advanced

Gradient Badge

span - beginner

Status Badge

span - beginner

Notification Dot

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 add a hover fill effect?▼

Add hover:bg-blue-500 hover:text-white transition-colors to make the tag fill on hover.