Color Utilities

Tailwind Color System

Tailwind includes a curated color palette. Colors follow the pattern {color}-{shade}:

Colors: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, white, black

Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950

<div class="bg-blue-500">       blue background    </div>
<div class="text-red-600">      red text           </div>
<div class="border-green-400">  green border       </div>

Light/dark variants:

• bg-blue-100 — very light blue (good for backgrounds)
• bg-blue-500 — medium blue (good for buttons)
• bg-blue-900 — very dark blue

Your Task

Create 4 elements using different color combinations: bg and text colors from at least 3 different color families, and at least one border color.