Tailwind CSS Academy · Lesson

Card Component Patterns

Build cards with image headers, content bodies, and action footers using flex and grid layouts within a rounded, shadowed container.

What Makes a Card Component

A card is a self-contained rectangular surface that groups related content. Cards typically include three zones: a header (often an image or colored strip), a body (title, description, metadata), and an optional footer (action buttons).

In Tailwind, the base card shell uses bg-white rounded-xl shadow-md overflow-hidden to create a white surface with rounded corners, a drop shadow for depth, and clipped corners for any inner images.

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
  <!-- Card content goes here -->
</div>

Card With Image Header

The most common card pattern features an image header that spans the full width above the content. Use w-full h-48 object-cover on the <img> tag to fill the width and crop the height consistently regardless of the original image dimensions.

This approach ensures all cards in a grid look uniform even when source images have varying aspect ratios.

<div class="bg-white rounded-xl shadow-md overflow-hidden max-w-sm">
  <img
    src="photo.jpg"
    alt="Mountain landscape"
    class="w-full h-48 object-cover"
  />
  <div class="p-5">
    <h3 class="text-lg font-semibold text-gray-900">Card Title</h3>
    <p class="mt-1 text-sm text-gray-500">Short description of the card content.</p>
  </div>
</div>

All lessons in this course

← Back to Tailwind CSS Academy