Tailwind Cards and Badges

Cards and badges are two of the most reusable UI components in web design. Cards display grouped content in a box. Badges show small status labels or counts. Tailwind makes both quick to build and easy to customize.

What Is a Card?

A card is a container that groups related content — like an image, title, description, and action button — inside a visible box.

┌──────────────────────────────┐ ← rounded corners
│  [          Image          ] │ ← overflow-hidden clips the image
│                              │
│  Card Title                  │ ← font-bold, larger text
│  Some description about the  │ ← text-gray-600, smaller text
│  card content here.          │
│                              │
│  [   Read More Button   ]    │ ← action at the bottom
└──────────────────────────────┘ ← shadow for depth

Basic Card

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
  <img src="image.jpg" alt="Card image" class="w-full h-48 object-cover">
  <div class="p-5">
    <h3 class="text-lg font-bold text-gray-900">Card Title</h3>
    <p class="text-gray-600 mt-2 text-sm">A short description about this card's content.</p>
    <button class="mt-4 bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 transition">
      Read More
    </button>
  </div>
</div>

Card Variants

Horizontal Card (Image + Text Side by Side)

<div class="bg-white rounded-xl shadow-md flex overflow-hidden max-w-lg">
  <img src="image.jpg" class="w-36 object-cover">
  <div class="p-4">
    <h3 class="font-bold text-gray-900">Horizontal Card</h3>
    <p class="text-sm text-gray-500 mt-1">Image sits to the left, text to the right.</p>
    <button class="mt-3 text-blue-600 text-sm hover:underline">View Details →</button>
  </div>
</div>
┌──────────┬──────────────────────────┐
│          │  Horizontal Card         │
│  Image   │  Image on left,          │
│          │  text on right.          │
│          │  [View Details →]        │
└──────────┴──────────────────────────┘

Profile / User Card

<div class="bg-white rounded-2xl shadow-lg p-6 text-center max-w-xs">
  <img src="avatar.jpg" class="w-20 h-20 rounded-full mx-auto object-cover border-4 border-blue-100">
  <h3 class="mt-4 text-xl font-bold text-gray-900">Sarah Johnson</h3>
  <p class="text-sm text-gray-500">UX Designer at Acme Corp</p>
  <div class="mt-4 flex justify-center gap-3">
    <button class="bg-blue-600 text-white px-4 py-1.5 rounded-full text-sm">Follow</button>
    <button class="border border-gray-300 text-gray-700 px-4 py-1.5 rounded-full text-sm">Message</button>
  </div>
</div>

Stat / Metric Card

<div class="bg-white rounded-xl shadow p-5 flex items-center gap-4">
  <div class="bg-blue-100 p-3 rounded-full text-blue-600 text-2xl">📈</div>
  <div>
    <p class="text-sm text-gray-500">Total Revenue</p>
    <p class="text-2xl font-bold text-gray-900">$48,295</p>
    <p class="text-xs text-green-500">↑ 12% from last month</p>
  </div>
</div>
┌─────────────────────────────────────┐
│  [📈]   Total Revenue               │
│         $48,295                     │
│         ↑ 12% from last month       │
└─────────────────────────────────────┘

Pricing Card

<div class="bg-white rounded-2xl shadow-lg p-8 max-w-xs border-2 border-blue-500">
  <p class="text-sm font-semibold text-blue-600 uppercase tracking-wide">Pro Plan</p>
  <p class="mt-2 text-4xl font-bold text-gray-900">$29<span class="text-base font-normal text-gray-500">/mo</span></p>
  <ul class="mt-6 space-y-3 text-gray-600 text-sm">
    <li>✅ 10 Projects</li>
    <li>✅ 50GB Storage</li>
    <li>✅ Priority Support</li>
    <li>❌ Custom Domain</li>
  </ul>
  <button class="mt-8 w-full bg-blue-600 text-white py-2.5 rounded-xl font-semibold hover:bg-blue-700 transition">
    Get Started
  </button>
</div>

Card with Header and Footer

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
  <!-- Card Header -->
  <div class="bg-blue-600 text-white px-5 py-3 font-semibold">
    Order Summary
  </div>
  <!-- Card Body -->
  <div class="p-5 space-y-2 text-sm text-gray-700">
    <div class="flex justify-between"><span>Subtotal</span><span>$80.00</span></div>
    <div class="flex justify-between"><span>Shipping</span><span>$5.00</span></div>
    <div class="flex justify-between font-bold text-gray-900"><span>Total</span><span>$85.00</span></div>
  </div>
  <!-- Card Footer -->
  <div class="bg-gray-50 px-5 py-3 border-t">
    <button class="w-full bg-green-600 text-white py-2 rounded-lg font-semibold">Checkout</button>
  </div>
</div>
┌───────────────────────────┐
│[Blue Header] Order Summary│ ← colored header
├───────────────────────────┤
│ Subtotal          $80.00  │
│ Shipping           $5.00  │
│ Total             $85.00  │
├───────────────────────────┤
│ [     Checkout     ]      │ ← footer action
└───────────────────────────┘

Hoverable and Interactive Cards

<div class="bg-white rounded-xl shadow hover:shadow-lg hover:-translate-y-1 transition-all duration-200 p-5 cursor-pointer">
  <h3 class="font-bold text-gray-800">Hover Over Me</h3>
  <p class="text-gray-500 text-sm mt-1">This card lifts up when you hover.</p>
</div>
Normal:              On Hover:
┌─────────────┐       ┌─────────────┐  ← moves up 4px (-translate-y-1)
│ Hover Me    │  →    │ Hover Me    │  ← bigger shadow
│ This card.. │       │ This card.. │
└─────────────┘       └─────────────┘
  shadow-md              shadow-lg

What Is a Badge?

A badge is a small label that communicates status, category, count, or notification. It sits inside or near other elements.

Use cases for badges:
│ Article tag │  ┌─────────────────────────────┐
  ─────────      │ New         [Sale] 🏷️       │
                 │ Featured    [Hot] 🔥        │
                 │ Status      [Active] ✅     │  
                 │ Count       3 notifications │
                 └─────────────────────────────┘

Basic Badges

<!-- Status badges -->
<span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-semibold">Active</span>
<span class="bg-red-100 text-red-700 px-3 py-1 rounded-full text-xs font-semibold">Inactive</span>
<span class="bg-yellow-100 text-yellow-700 px-3 py-1 rounded-full text-xs font-semibold">Pending</span>
<span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-xs font-semibold">In Review</span>
<span class="bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-xs font-semibold">Archived</span>

Color-to-Meaning Reference:

[  Active  ] → green   (success, go, live)
[ Inactive ] → red     (error, stopped, off)
[ Pending  ] → yellow  (warning, waiting)
[In Review ] → blue    (info, processing)
[ Archived ] → gray    (neutral, dormant)

Badge Shapes

<!-- Pill (rounded-full) -->
<span class="bg-blue-500 text-white px-3 py-1 rounded-full text-xs">New</span>

<!-- Square / Rectangular -->
<span class="bg-blue-500 text-white px-3 py-1 rounded text-xs">New</span>

<!-- Dot with text -->
<span class="flex items-center gap-1.5 text-sm text-green-700">
  <span class="w-2 h-2 rounded-full bg-green-500 inline-block"></span>
  Online
</span>
Pill:        ( New )     ← rounded-full
Square:      [ New ]     ← rounded
Dot + text:  ● Online    ← dot indicator

Notification Badge (Count on Icon)

<div class="relative inline-block">
  <!-- Icon (bell emoji as example) -->
  <span class="text-2xl">🔔</span>
  <!-- Count badge -->
  <span class="absolute -top-1 -right-1 bg-red-500 text-white text-xs w-5 h-5 rounded-full flex items-center justify-center font-bold">
    3
  </span>
</div>
        ³   ← absolute positioned, -top-1 -right-1
       ─────
      🔔

Badge Inside a Card

<div class="bg-white rounded-xl shadow p-5 max-w-sm">
  <div class="flex items-center justify-between">
    <h3 class="font-bold text-gray-900">Blog Post Title</h3>
    <span class="bg-yellow-100 text-yellow-700 px-2 py-0.5 rounded text-xs font-medium">Featured</span>
  </div>
  <p class="text-gray-500 text-sm mt-2">A short excerpt from the article here.</p>
  <div class="mt-4 flex gap-2">
    <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded text-xs">Tailwind</span>
    <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded text-xs">CSS</span>
    <span class="bg-blue-50 text-blue-600 px-2 py-1 rounded text-xs">Design</span>
  </div>
</div>
┌────────────────────────────────────┐
│ Blog Post Title      [Featured]    │
│ A short excerpt from the article.  │
│                                    │
│ [Tailwind] [CSS] [Design]          │
└────────────────────────────────────┘

Card Grid with Badges

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
  <div class="bg-white rounded-xl shadow-md overflow-hidden">
    <img src="course.jpg" class="w-full h-40 object-cover">
    <div class="p-4">
      <div class="flex gap-2 mb-2">
        <span class="bg-green-100 text-green-700 text-xs px-2 py-0.5 rounded-full font-medium">Beginner</span>
        <span class="bg-purple-100 text-purple-700 text-xs px-2 py-0.5 rounded-full font-medium">Free</span>
      </div>
      <h3 class="font-bold text-gray-900">Tailwind CSS Basics</h3>
      <p class="text-sm text-gray-500 mt-1">Learn Tailwind from scratch.</p>
    </div>
  </div>
</div>

Badge Anatomy Summary

Soft badge (light bg + dark text):   bg-green-100  text-green-700
Solid badge (dark bg + white text):  bg-green-500  text-white
Outlined badge (border only):        border border-green-500 text-green-500

Size:      px-2 py-0.5 text-xs   → tiny
           px-3 py-1   text-sm   → standard
           px-4 py-1.5 text-base → large

Shape:     rounded-full  → pill
           rounded       → square corners

Summary

  • Cards use bg-white, rounded-xl, shadow, and overflow-hidden as a base
  • Add hover:shadow-lg hover:-translate-y-1 transition for interactive lift effects
  • Cards can be vertical, horizontal, profile, pricing, stat, or header-footer layouts
  • Badges use rounded-full for pills, small text-xs, and semantic color pairs
  • Position notification counts using absolute -top-1 -right-1 on a relative container
  • Combine badges inside cards to show tags, categories, or status labels
Previous lessons
Back to courses
Next lessons

Leave a Comment