Card component patterns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this Tailwind card component visually display?

Consider this card component code using Tailwind CSS. What will you see rendered in the browser?

Tailwind

<article class="max-w-sm rounded-lg shadow-lg overflow-hidden bg-white dark:bg-gray-800">
  <img class="w-full h-48 object-cover" src="https://via.placeholder.com/400x200" alt="Sample image" />
  <div class="p-4">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Card Title</h2>
    <p class="mt-2 text-gray-600 dark:text-gray-300">This is a simple card description.</p>
    <button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Click Me</button>
  </div>
</article>

A A card with a black background and white text but no image or button.

B A card with a red background, no image, and a button that is disabled and gray.

C A white card with rounded corners and shadow, showing an image on top, a title, description, and a blue button below.

D A card with square corners, no shadow, and text only with no button or image.

💡 Hint

Look at the classes for background, shadow, and button styling.

The card uses white background with dark mode support, rounded corners, shadow, an image on top, text content, and a blue button with hover and focus styles.

❓ selector

intermediate

Which Tailwind CSS selector targets the card's button on hover?

Given a card with a button styled using Tailwind CSS, which selector applies styles only when the button is hovered by the mouse?

Tailwind

<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Click Me</button>

A .hover\:bg-blue-700:hover

B .bg-blue-600:hover

C .hover-bg-blue-700

D .button:hover

💡 Hint

Tailwind uses special syntax for hover states in class names.

Tailwind generates CSS with selectors like .hover\:bg-blue-700:hover to apply styles on hover for that class.

❓ layout

advanced

How to make cards display in a responsive grid with 3 columns on large screens?

You want to show multiple card components in a grid that has 1 column on small screens, 2 columns on medium, and 3 columns on large screens using Tailwind CSS. Which container class achieves this?

Tailwind

<section class="???">
  <!-- multiple card components here -->
</section>

A grid-cols-3 grid gap-4

B flex flex-wrap justify-between

C block md:grid-cols-2 lg:grid-cols-3

D grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6

💡 Hint

Use Tailwind's grid and responsive column classes.

The class 'grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6' creates a grid with 1 column by default, 2 on medium screens, and 3 on large screens with spacing.

❓ accessibility

advanced

Which ARIA attribute improves accessibility for a card used as a clickable link?

If a card is clickable and acts like a link, which ARIA attribute should you add to the card container to help screen readers understand its role?

Tailwind

<article class="card" tabindex="0">
  <!-- card content -->
</article>

A role="link"

B aria-pressed="true"

C aria-hidden="true"

D role="button"

💡 Hint

Think about the semantic role that matches a clickable link.

Using role="link" tells assistive technologies that the element behaves like a link, improving accessibility.

🧠 Conceptual

expert

What is the main benefit of using Tailwind's utility classes for card components over traditional CSS files?

Why do many developers prefer Tailwind CSS utility classes when building card components instead of writing separate CSS stylesheets?

A Utility classes automatically generate JavaScript for card animations.

B Utility classes allow faster styling directly in HTML, reducing context switching and improving consistency.

C Utility classes require no HTML changes and only work with inline styles.

D Utility classes prevent any customization of card styles to keep design uniform.

💡 Hint

Think about how utility classes affect workflow and code organization.

Tailwind's utility classes let developers style elements quickly inside HTML, avoiding separate CSS files and making design consistent and maintainable.