Mobile-first philosophy in Tailwind - Mini Project: Build & Apply

Mobile-First Responsive Card with Tailwind CSS

📖 Scenario: You are building a simple profile card for a mobile app. The card should look good on small screens first, then adjust for larger screens.

🎯 Goal: Create a responsive profile card using Tailwind CSS that is mobile-friendly by default and changes layout on larger screens.

📋 What You'll Learn

Use Tailwind CSS utility classes

Start with a vertical layout for mobile screens

Change to a horizontal layout on screens medium and larger

Include an image, a name, and a short description

Use semantic HTML elements

💡 Why This Matters

🌍 Real World

Profile cards are common in social apps, team pages, and portfolios. Mobile-first design ensures good experience on phones.

💼 Career

Understanding mobile-first responsive design with Tailwind CSS is essential for front-end developers building modern websites and apps.

1

Create the basic HTML structure for the profile card

Write the HTML code to create a <section> element with a class max-w-sm mx-auto p-4. Inside it, add an <img> with src='https://via.placeholder.com/150' and alt='Profile picture'. Below the image, add a <h2> with the text Jane Doe and a <p> with the text Web developer and designer.

Tailwind

Need a hint?

Use a section with classes for max width, center alignment, and padding. Add an img, h2, and p inside.

2

Add Tailwind classes for mobile-first styling

Add Tailwind CSS classes to the img to make it rounded with rounded-full, centered with mx-auto, and width w-24. Add classes text-center mt-4 to the h2 and p elements to center the text and add margin top.

Tailwind

  
  Jane Doe
  Web developer and designer
  

Need a hint?

Use rounded-full for circle image, mx-auto to center horizontally, and w-24 for width. Center text with text-center and add margin top with mt-4.

3

Add responsive layout for medium screens and larger

Modify the section to use md:flex md:items-center md:space-x-6 classes. Add md:w-32 to the img to make it smaller on medium screens. Add md:text-left to the h2 and p to align text left on medium screens.

Tailwind

  
  
    Jane Doe
    Web developer and designer
  
  

Need a hint?

Use md:flex to switch to horizontal layout on medium screens. Use md:items-center to align vertically. Add spacing with md:space-x-6. Adjust image width with md:w-32. Change text alignment with md:text-left.

4

Add accessibility and final touches

Wrap the h2 and p inside a <div> for grouping. Add aria-label="Profile card for Jane Doe" to the section for accessibility. Ensure the image has an alt attribute describing it.

Tailwind

  
  
    Jane Doe
    Web developer and designer
  
  

Need a hint?

Add aria-label to the section for screen readers. Make sure the image has a descriptive alt attribute.