Box shadow utilities in Tailwind - Mini Project: Build & Apply

Box Shadow Utilities with Tailwind CSS

📖 Scenario: You are building a simple product card for an online store. You want to add different shadow effects to the card to make it look nice and stand out on the page.

🎯 Goal: Create a product card using Tailwind CSS that uses box shadow utilities to add subtle and strong shadows. The card should have a title, a description, and a button. The shadows should change the look of the card.

📋 What You'll Learn

Use Tailwind CSS box shadow utilities to style the card

Create a card container with a subtle shadow using shadow-sm

Add a button inside the card with a stronger shadow using shadow-lg

Use semantic HTML elements for accessibility

Make sure the card is responsive and looks good on small and large screens

💡 Why This Matters

🌍 Real World

Box shadows are used in web design to create depth and highlight important elements like cards, buttons, and modals. This makes interfaces more visually appealing and easier to understand.

💼 Career

Knowing how to use Tailwind CSS utilities for shadows helps front-end developers quickly build attractive and accessible UI components without writing custom CSS.

1

Create the basic HTML structure for the product card

Write the HTML code to create a <section> element with a class max-w-sm mx-auto p-4 bg-white rounded. Inside it, add an <h2> with the text "Product Name" and a <p> with the text "This is a great product.".

Tailwind

Need a hint?

Use a <section> for the card container. Add a heading and a paragraph inside it.

2

Add a subtle shadow to the card container

Add the Tailwind CSS class shadow-sm to the <section> element to give it a subtle box shadow.

Tailwind

  
  Product Name
  This is a great product.

Need a hint?

Simply add shadow-sm to the existing class list on the <section>.

3

Add a button with a strong shadow inside the card

Inside the <section>, add a <button> element with the text "Buy Now". Give the button the Tailwind CSS classes mt-4 px-4 py-2 bg-blue-600 text-white rounded shadow-lg to style it and add a strong shadow.

Tailwind

  Product Name
  This is a great product.
  

Need a hint?

Use the shadow-lg class on the button to create a stronger shadow effect.

4

Make the card responsive and accessible

Add the attribute aria-label="Product card" to the <section> element. Also, add the Tailwind CSS class sm:max-w-md to the <section> to make it wider on small screens and above.

Tailwind

  Product Name
  This is a great product.
  Buy Now
  

Need a hint?

Use aria-label for accessibility and add sm:max-w-md to the class list for responsiveness.