Height utilities in Tailwind - Mini Project: Build & Apply

Height utilities

📖 Scenario: You are building a simple webpage section that shows three colored boxes stacked vertically. Each box should have a different height using Tailwind CSS height utilities.

🎯 Goal: Create three <div> elements inside a container. Use Tailwind CSS height utilities to set the first box height to h-16, the second box height to h-24, and the third box height to h-32. Each box should have a distinct background color and some margin between them.

📋 What You'll Learn

Use a container <section> with Tailwind class p-4 for padding.

Create three <div> boxes inside the container.

Set the first box height to h-16 and background color to bg-red-500.

Set the second box height to h-24 and background color to bg-green-500.

Set the third box height to h-32 and background color to bg-blue-500.

Add vertical margin mb-4 between the boxes.

💡 Why This Matters

🌍 Real World

Setting fixed heights on elements is common in web design to create consistent layouts, cards, or sections with visual balance.

💼 Career

Knowing how to use Tailwind CSS height utilities helps you quickly style components in modern web projects, improving your frontend development skills.

1

Create the container section

Create a <section> element with the Tailwind class p-4 to add padding around the content.

Tailwind

Need a hint?

Use a semantic <section> tag and add p-4 class for padding.

2

Add the first box with height h-16

Inside the <section>, add a <div> with Tailwind classes h-16, bg-red-500, and mb-4 to create the first box with height 4rem, red background, and margin below.

Tailwind

Need a hint?

The height h-16 means 4rem tall. Use bg-red-500 for a red background and mb-4 for margin bottom.

3

Add the second box with height h-24

Below the first box, add a second <div> with Tailwind classes h-24, bg-green-500, and mb-4 to create a taller green box with margin below.

Tailwind

Need a hint?

The height h-24 means 6rem tall. Use bg-green-500 for a green background and mb-4 for margin bottom.

4

Add the third box with height h-32

Below the second box, add a third <div> with Tailwind classes h-32 and bg-blue-500 to create the tallest blue box. Do not add margin below this last box.

Tailwind

Need a hint?

The height h-32 means 8rem tall. Use bg-blue-500 for a blue background. No margin needed below the last box.