Day 3 - Components

Build reusable UI elements from scratch using utility classes.

What are Tailwind Components? Unlike Bootstrap, Tailwind has no pre-made components. Instead, you build every component yourself by composing utility classes — giving you full control over appearance.

1. Navbar

A responsive navigation bar built from scratch with Tailwind utilities and a small JavaScript toggle.

Key classes: flex items-center justify-between, bg-gray-900, hidden md:flex

2. Alerts

Contextual feedback messages built with background + border utilities:

Primary! This is a primary alert message.

Success! Your action was completed successfully.

Warning! Please review before proceeding.

Danger! Something went wrong.

Key pattern: bg-{color}-50 border-l-4 border-{color}-500 text-{color}-800 p-4 rounded-r-lg

3. Buttons

Standard utility-built buttons:

Button Colors

Outlined Buttons

Button Sizes

Key classes: bg-{color}-500, hover:bg-{color}-600, text-white font-bold py-2 px-4 rounded

4. Badges

Small label elements for counts and status indicators:

Solid Badges

Primary Secondary Success Danger Warning Info

Pill (Soft) Badges

Pill 99+ New

Badges in Buttons

5. Cards

A reusable card component built entirely with Tailwind utilities:

John Doe

Web Developer specializing in Tailwind CSS.

⚡

Fast Performance

Tailwind generates only the CSS you use, resulting in tiny files.

Learn more →

Total Users

12,430

↑ 8.2% from last month

Key pattern: bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden

6. Modal (Dialog) Pattern

The visual structure of a modal — toggle visibility with JS:

Key pattern: fixed inset-0 bg-black/50 z-50 flex items-center justify-center

7. Form Elements

Styled form inputs using Tailwind utilities:

Contact Form

Name

Message

Key pattern: border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-indigo-500

← Previous: Utilities ← Back to Index