Card component patterns in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a card container with padding and shadow.

Tailwind

<div class="[1] rounded-lg">
  <h2 class="text-xl font-bold">Card Title</h2>
  <p>This is a simple card.</p>
</div>

Drag options to blanks, or click blank then click option'

Ap-2 text-center

Bm-4 border-2

Cp-4 shadow-lg bg-white

Dflex items-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin instead of padding for spacing inside the card.

Forgetting to add a background color so shadow is not visible.

The class p-4 shadow-lg bg-white adds padding, a large shadow, and a white background to the card container, making it visually distinct.

2fill in blank

medium

Complete the code to make the card image cover the top area with rounded top corners.

Tailwind

<div class="max-w-sm rounded-lg overflow-hidden shadow-lg">
  <img class="w-full [1]" src="image.jpg" alt="Card image">
  <div class="p-4">
    <h3 class="font-semibold text-lg">Card Heading</h3>
  </div>
</div>

Drag options to blanks, or click blank then click option'

Aobject-contain rounded-b-lg

Bobject-cover rounded-t-lg

Cobject-fill rounded-lg

Dobject-scale-down rounded-none

Attempts:

3 left

💡 Hint

Common Mistakes

Using rounded-lg which rounds all corners, causing mismatch with card container.

Using object-contain which may leave empty spaces.

The class object-cover makes the image fill the width and height while keeping aspect ratio, and rounded-t-lg rounds only the top corners to match the card shape.

3fill in blank

hard

Fix the error in the card footer to center the button horizontally.

Tailwind

<div class="p-4 border-t">
  <button class="bg-blue-500 text-white py-2 px-4 rounded [1]">Click Me</button>
</div>

Drag options to blanks, or click blank then click option'

Amx-auto block

Bfloat-left

Ctext-left

Dinline-block

Attempts:

3 left

💡 Hint

Common Mistakes

Using float classes which remove the element from normal flow.

Using text alignment classes which do not affect inline elements.

Using mx-auto block centers the button horizontally by making it a block element with automatic left and right margins.

4fill in blank

hard

Fill both blanks to create a responsive card grid with 3 columns on medium screens and gap between cards.

Tailwind

<div class="grid [1] [2]">
  <div class="bg-white p-4 rounded shadow">Card 1</div>
  <div class="bg-white p-4 rounded shadow">Card 2</div>
  <div class="bg-white p-4 rounded shadow">Card 3</div>
</div>

Drag options to blanks, or click blank then click option'

Amd:grid-cols-3

Bgap-6

Cflex

Ditems-center

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid which changes layout behavior.

Forgetting to add gap, causing cards to stick together.

md:grid-cols-3 sets 3 columns on medium screens and above. gap-6 adds space between grid items for better layout.

5fill in blank

hard

Fill all three blanks to create a card with a header, body text, and a footer button aligned right.

Tailwind

<article class="max-w-sm rounded-lg shadow-lg bg-white">
  <header class="p-4 border-b">
    <h2 class="text-lg font-semibold [1]">Card Header</h2>
  </header>
  <main class="p-4">
    <p class="text-gray-700 [2]">This is the card body content.</p>
  </main>
  <footer class="p-4 border-t flex [3]">
    <button class="bg-green-500 text-white py-2 px-4 rounded">Action</button>
  </footer>
</article>

Drag options to blanks, or click blank then click option'

Atext-center

Bleading-relaxed

Cjustify-end

Ditems-start

Attempts:

3 left

💡 Hint

Common Mistakes

Using items-start in footer which aligns vertically, not horizontally.

Not centering header text, making it look unbalanced.

text-center centers the header text. leading-relaxed makes body text easier to read with spacing. justify-end aligns the footer button to the right inside the flex container.

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