Responsive card grid in Tailwind - Mini Project: Build & Apply

Responsive Card Grid

📖 Scenario: You are building a simple webpage to display a set of product cards. Each card shows a product name and a short description. The cards should arrange themselves nicely in a grid that changes layout depending on the screen size.

🎯 Goal: Create a responsive card grid using Tailwind CSS. The grid should show one column on small screens, two columns on medium screens, and three columns on large screens. Each card should have a border, some padding, and a subtle shadow.

📋 What You'll Learn

Use a container <main> element with Tailwind classes for padding and max width.

Create a grid container with Tailwind classes that changes columns responsively: 1 column on small, 2 on medium, 3 on large screens.

Each card should be a <section> with a border, padding, rounded corners, and shadow using Tailwind classes.

Inside each card, include a <h2> for the product name and a <p> for the description.

Ensure the page uses semantic HTML and is accessible.

💡 Why This Matters

🌍 Real World

Responsive card grids are common in online stores, portfolios, and dashboards to display items neatly on all devices.

💼 Career

Knowing how to build responsive, accessible layouts with Tailwind CSS is valuable for front-end web development roles.

1

Create the HTML skeleton with product data

Create a <main> element with Tailwind classes max-w-4xl mx-auto p-4. Inside it, create a <section> with the class grid. Inside the grid, add three <section> cards each with a <h2> and <p> for these products:
1. Name: Camera, Description: High quality digital camera
2. Name: Headphones, Description: Noise cancelling headphones
3. Name: Smartwatch, Description: Track your fitness and notifications

Tailwind

Need a hint?

Start by creating the main container with padding and max width. Then add a grid container and three cards with the exact product names and descriptions.

2

Add responsive grid columns

Add Tailwind classes to the grid <section> to make it have 1 column on small screens, 2 columns on medium screens, and 3 columns on large screens. Use the classes grid-cols-1 md:grid-cols-2 lg:grid-cols-3.

Tailwind

Need a hint?

Add the responsive grid column classes to the grid container to control how many columns show on different screen sizes.

3

Style each card with border, padding, rounded corners, and shadow

Add Tailwind classes border p-4 rounded shadow to each product card <section> inside the grid to give them a border, padding, rounded corners, and a subtle shadow.

Tailwind

Need a hint?

Add the styling classes to each card section to make them visually distinct and nicely spaced.

4

Add accessibility and semantic improvements

Add aria-label="Product card for Camera", aria-label="Product card for Headphones", and aria-label="Product card for Smartwatch" respectively to each product card <section>. Also, add tabindex="0" to each card to make them keyboard focusable.

Tailwind

Need a hint?

Add aria-labels to describe each card for screen readers and tabindex="0" to make cards focusable by keyboard.