Tailwind Cards

What Makes Up a Tailwind Card?

A card is typically just a div with a background color, border or shadow, rounded corners, and padding, combined with whatever content it holds (an image, heading, text, and often a button or link).

Because Tailwind has no built-in .card class, every card is built from the same layout, spacing, border, and shadow utilities you've already learned in earlier lessons, composed together.

<div class="rounded-xl border border-slate-200 bg-white p-6 shadow-sm">
  <h3 class="text-lg font-semibold text-slate-900">Card Title</h3>
  <p class="mt-2 text-sm text-slate-600">Supporting card description text goes here.</p>
</div>

Border, radius, padding, and shadow together create the classic card container look.

Basic Card Structure

<div class="rounded-xl border bg-white p-6 shadow-sm">
  <!-- image, heading, body text, actions -->
</div>

• rounded-xl softens the card's corners.
• border plus shadow-sm gives it subtle definition against the page background.
• p-6 provides comfortable internal spacing for the card's content.
• bg-white (with a dark:bg-slate-800 counterpart) sets the card's surface color.

Card Patterns Cheatsheet

Common card variations and the utilities that build them.

Building an Image Card

For cards with a leading image, apply overflow-hidden on the outer card and let the image bleed edge-to-edge at the top, then add padding only to the text content below it.

<div class="overflow-hidden rounded-xl border bg-white shadow-sm">
  <img class="h-48 w-full object-cover" src="/product.jpg" alt="Product photo" />
  <div class="p-6">
    <h3 class="font-semibold text-slate-900">Product Name</h3>
    <p class="mt-1 text-sm text-slate-600">$49.00</p>
  </div>
</div>

Cards With Footer Actions

Separating a card's action buttons into a distinct footer, using a top border to visually divide it from the main content, keeps calls-to-action clear without cluttering the body copy.

<div class="rounded-xl border bg-white shadow-sm">
  <div class="p-6">
    <h3 class="font-semibold text-slate-900">Upgrade Plan</h3>
    <p class="mt-1 text-sm text-slate-600">Unlock advanced features for your team.</p>
  </div>
  <div class="border-t p-4">
    <button class="w-full rounded-lg bg-blue-600 py-2 text-sm font-semibold text-white">Upgrade Now</button>
  </div>
</div>

Responsive Card Grids

As covered in the Grid lesson, wrapping multiple cards in a responsive grid-cols-* container is the standard way to build a card gallery that adapts across screen sizes.

<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
  <div class="rounded-xl border bg-white p-6 shadow-sm">Card 1</div>
  <div class="rounded-xl border bg-white p-6 shadow-sm">Card 2</div>
  <div class="rounded-xl border bg-white p-6 shadow-sm">Card 3</div>
</div>

Common Mistakes

• Inconsistent border, radius, or shadow values between similar cards on the same page.
• Forgetting overflow-hidden on image cards, causing images to poke past the card's rounded corners.
• Making an entire card clickable with a <div onclick> pattern instead of wrapping it in a real <a> element.
• Not testing card grids across breakpoints, leaving awkward gaps or overly narrow cards on some screen sizes.
• Overloading a single card with too many unrelated pieces of information instead of splitting into multiple cards.

Key Takeaways

• A Tailwind card is built from ordinary layout, spacing, border, and shadow utilities, not a dedicated card class.
• Image cards need overflow-hidden on the container to properly clip images to rounded corners.
• Footer actions separated by a top border keep card calls-to-action visually distinct.
• Responsive grids are the standard way to lay out multiple cards together.
• Clickable cards should be wrapped in a real <a> element for accessibility, not a div with a click handler.