Card component patterns in Tailwind

Introduction

Cards help group related information in a neat box. They make content easy to scan and look nice on any screen.

Showing a product with image, title, and price on an online store

Displaying a user profile with photo and details

Presenting a blog post preview with title, image, and summary

Listing features or services in a clean, organized way

Creating clickable items that lead to more details

Syntax

Tailwind

<div class="card">
  <img src="image.jpg" alt="Description" class="card-image" />
  <div class="card-content">
    <h2 class="card-title">Title here</h2>
    <p class="card-text">Some description or details.</p>
  </div>
</div>

Use flex or grid with Tailwind to arrange card parts.

Apply padding, margin, and shadows for spacing and depth.

Examples

A simple card with image on top, title, and text below. Rounded corners and shadow add style.

Tailwind

<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="https://via.placeholder.com/400x200" alt="Sunset" />
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Sunset</div>
    <p class="text-gray-700 text-base">A beautiful sunset view.</p>
  </div>
</div>

Horizontal card with image on left and text on right using flexbox.

Tailwind

<div class="flex max-w-md bg-white rounded-lg shadow-md overflow-hidden">
  <img class="w-1/3 object-cover" src="https://via.placeholder.com/150" alt="Profile" />
  <div class="p-4">
    <h3 class="text-lg font-semibold">Jane Doe</h3>
    <p class="text-gray-600">Web developer and designer.</p>
  </div>
</div>

Multiple cards arranged in a responsive grid that changes columns on small screens.

Tailwind

<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
  <div class="bg-white p-4 rounded shadow">
    <h4 class="font-bold">Feature 1</h4>
    <p>Details about feature one.</p>
  </div>
  <div class="bg-white p-4 rounded shadow">
    <h4 class="font-bold">Feature 2</h4>
    <p>Details about feature two.</p>
  </div>
</div>

Sample Program

This card shows an image on top, a bold title, descriptive text, and a button. It uses Tailwind classes for spacing, colors, and hover/focus states. The card is centered on the page with some padding around.

Tailwind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Card Component Example</title>
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex items-center justify-center min-h-screen p-4">
  <div class="max-w-sm bg-white rounded-lg shadow-lg overflow-hidden">
    <img class="w-full h-48 object-cover" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=400&q=80" alt="Mountain" />
    <div class="p-6">
      <h2 class="text-2xl font-bold mb-2">Mountain Adventure</h2>
      <p class="text-gray-700 mb-4">Explore the beautiful mountain trails and enjoy nature's beauty.</p>
      <button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-400">Learn More</button>
    </div>
  </div>
</body>
</html>

Important Notes

Always add alt text to images for accessibility.

Use focus:outline-none and focus:ring classes on buttons for keyboard users.

Test cards on different screen sizes to ensure they look good everywhere.

Summary

Cards group related content in a neat box with image, text, and actions.

Use Tailwind utilities like padding, shadows, and flex/grid to build cards easily.

Make cards accessible with alt text and keyboard-friendly buttons.

Practice

1. What is the main purpose of a card component in web design using Tailwind?

easy

A. To add background music to a website section

B. To create complex animations on a webpage

C. To replace the entire page layout with a single element

D. To group related content like images, text, and buttons in a neat box

Solution

1. Step 1: Understand the role of card components

   Cards are designed to group related content visually, such as images, text, and actions, making information easy to scan.

2. Step 2: Identify the correct purpose

   Options A, B, and C describe unrelated or incorrect uses of cards in web design.

3. Final Answer:

   To group related content like images, text, and buttons in a neat box -> Option D

4. Quick Check:

   Card purpose = Group related content [OK]

Hint: Cards group content visually in boxes [OK]

Common Mistakes:

• Thinking cards are for animations
• Confusing cards with page layout containers
• Assuming cards add multimedia like music

2. Which Tailwind class correctly adds padding inside a card component?

easy

A. p-4

B. m-4

C. text-center

D. bg-gray-200

Solution

1. Step 1: Understand Tailwind padding classes

   The class p-4 adds padding inside an element, creating space between content and edges.

2. Step 2: Differentiate from other classes

   m-4 adds margin outside the element, text-center centers text, and bg-gray-200 sets background color.

3. Final Answer:

   p-4 -> Option A

4. Quick Check:

   Padding inside card = p-4 [OK]

Hint: Padding starts with 'p-', margin with 'm-' [OK]

Common Mistakes:

• Confusing padding (p-) with margin (m-)
• Using text alignment instead of spacing
• Mixing background color with spacing classes

3. What will be the visual effect of this Tailwind card code snippet?

<div class="max-w-sm rounded overflow-hidden shadow-lg p-6">
  <img class="w-full" src="image.jpg" alt="Sample" />
  <div class="pt-4">Card content here</div>
</div>

medium

A. A full-width card with no shadow and no image

B. A card with no padding and square corners

C. A small card with rounded corners, shadow, padding, and a full-width image on top

D. A card with a border but no shadow or padding

Solution

1. Step 1: Analyze the container classes

   max-w-sm limits width to small size, rounded adds rounded corners, shadow-lg adds a large shadow, and p-6 adds padding inside the card.

2. Step 2: Check image and content layout

   w-full on the image makes it full width inside the card, and pt-4 adds top padding to the content below the image.

3. Final Answer:

   A small card with rounded corners, shadow, padding, and a full-width image on top -> Option C

4. Quick Check:

   Rounded + shadow + padding + full image = A small card with rounded corners, shadow, padding, and a full-width image on top [OK]

Hint: Look for rounded, shadow, padding classes for card style [OK]

Common Mistakes:

• Ignoring padding and shadow effects
• Assuming image is not full width
• Confusing max width with full width

4. Identify the error in this Tailwind card snippet:

<div class="rounded shadow p-4">
  <img src="photo.jpg" />
  <button class="bg-blue-500 text-white p-2">Click</button>
</div>

What is missing for accessibility?

medium

A. The div is missing a background color

B. The img tag is missing an alt attribute

C. The button is missing a hover effect class

D. The padding class on the button is incorrect

Solution

1. Step 1: Check image accessibility

   The img tag lacks an alt attribute, which is important for screen readers to describe the image.

2. Step 2: Review other options

   Button hover effects and background colors are style choices, not accessibility requirements. Padding on the button is valid.

3. Final Answer:

   The img tag is missing an alt attribute -> Option B

4. Quick Check:

   Missing alt attribute = accessibility issue [OK]

Hint: Always add alt text to images for accessibility [OK]

Common Mistakes:

• Ignoring missing alt attributes on images
• Confusing style issues with accessibility
• Assuming padding errors cause accessibility problems

5. You want to create a responsive card grid using Tailwind that shows 1 column on small screens and 3 columns on large screens. Which class combination achieves this?

hard

A. grid grid-cols-1 lg:grid-cols-3 gap-6

B. flex flex-col lg:flex-row gap-6

C. block lg:grid-cols-3 gap-6

D. grid-cols-3 grid gap-6 lg:grid-cols-1

Solution

1. Step 1: Understand responsive grid classes

   grid-cols-1 sets 1 column by default (small screens), and lg:grid-cols-3 changes to 3 columns on large screens. gap-6 adds spacing between grid items.

2. Step 2: Evaluate other options

   flex flex-col lg:flex-row gap-6 uses flex layout, which can work but does not define columns explicitly. block lg:grid-cols-3 gap-6 uses block which disables grid. grid-cols-3 grid gap-6 lg:grid-cols-1 reverses column counts incorrectly.

3. Final Answer:

   grid grid-cols-1 lg:grid-cols-3 gap-6 -> Option A

4. Quick Check:

   Responsive grid columns = grid grid-cols-1 lg:grid-cols-3 gap-6 [OK]

Hint: Use grid-cols-1 and lg:grid-cols-3 for responsive columns [OK]

Common Mistakes:

• Using flex instead of grid for column control
• Setting grid-cols-3 before lg breakpoint
• Forgetting to add grid container class