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.