Tailwind with React components - Mini Project: Build & Apply

Build a Responsive Card Component with Tailwind CSS and React

📖 Scenario: You are creating a simple card component for a website. This card will show a title, an image, and a short description. You want it to look good on phones and bigger screens using Tailwind CSS inside a React component.

🎯 Goal: Build a React functional component called Card that uses Tailwind CSS classes to style a responsive card with an image, a title, and a description.

📋 What You'll Learn

Create a React functional component named Card

Use Tailwind CSS classes for styling

Include an image with alt text for accessibility

Add a title and a description inside the card

Make the card responsive so it looks good on small and large screens

💡 Why This Matters

🌍 Real World

Cards like this are common on websites to show products, articles, or user profiles in a clean, responsive way.

💼 Career

Knowing how to combine React components with Tailwind CSS is a valuable skill for frontend developers building modern, accessible, and responsive user interfaces.

1

Create the React component structure

Create a React functional component called Card that returns a div with a class max-w-sm mx-auto. Inside this div, add an img tag with src="https://via.placeholder.com/400x200" and alt="Sample image". Below the image, add an h2 tag with the text Card Title and a p tag with the text This is a description of the card.

Tailwind

// Create the Card component with a div, img, h2, and p tags
function Card() {
  return (
    
      {/* Your code here */}
    
  );
}

Need a hint?

Start by writing a function named Card. Inside it, return a div with the class max-w-sm mx-auto. Add the image, title, and description inside this div.

2

Add Tailwind padding and background color

Inside the div with class max-w-sm mx-auto, add Tailwind classes bg-white and p-4 to give the card a white background and padding.

Tailwind

function Card() {
  return (
    
      {/* Add bg-white and p-4 classes here */}
      
      Card Title
      This is a description of the card.
    
  );
}

Need a hint?

Add the classes bg-white and p-4 inside the className attribute of the outer div.

3

Style the text and add rounded corners

Add Tailwind classes text-xl font-bold mb-2 to the h2 tag to make the title bigger and bold with margin below. Add text-gray-700 text-base to the p tag for gray colored normal text. Also, add rounded-lg and mb-4 classes to the img tag to round the corners and add margin below the image.

Tailwind

function Card() {
  return (
    
      {/* Add rounded-lg and mb-4 to img */}
      
      {/* Add text-xl font-bold mb-2 to h2 */}
      Card Title
      {/* Add text-gray-700 text-base to p */}
      This is a description of the card.
    
  );
}

Need a hint?

Use the className attribute to add the Tailwind classes to each element as described.

4

Make the card responsive with shadow and hover effect

Add Tailwind classes shadow-lg and hover:shadow-xl to the outer div to add a shadow and a bigger shadow on hover. Also add transition-shadow duration-300 for smooth shadow change. Finally, add sm:max-w-md to the outer div to make the card wider on small and larger screens.

Tailwind

function Card() {
  return (
    
      {/* Add shadow-lg, hover:shadow-xl, transition-shadow, duration-300, and sm:max-w-md here */}
      
      Card Title
      This is a description of the card.
    
  );
}

Need a hint?

Add all the classes inside the className attribute of the outer div exactly as shown.