Why display modes matter in Tailwind - See It in Action

Why Display Modes Matter

📖 Scenario: You are creating a simple webpage to show how different display modes affect layout. This helps understand why choosing the right display mode is important for arranging content on a page.

🎯 Goal: Build a webpage with three colored boxes arranged using different CSS display modes: block, inline-block, and flex. This will visually show how each display mode changes the layout.

📋 What You'll Learn

Use Tailwind CSS classes to set display modes

Create three colored boxes with text inside

Arrange boxes using block, inline-block, and flex display modes in separate sections

Include semantic HTML structure with section and main tags

Make sure the page is responsive and accessible

💡 Why This Matters

🌍 Real World

Understanding display modes helps you build layouts that look good and work well on all devices.

💼 Career

Web developers must know how to use display modes to create flexible, responsive, and accessible user interfaces.

1

Create the HTML structure with three colored boxes

Create a main element containing three div elements. Each div should have the classes bg-red-400, bg-green-400, and bg-blue-400 respectively. Add the text Box 1, Box 2, and Box 3 inside each box. Also, add p-4 and text-white classes to each box for padding and text color.

Tailwind

Need a hint?

Use three div elements inside main. Add Tailwind classes for background color, padding, and white text.

2

Wrap each display mode example in a section with a heading

Inside the main element, create three section elements. Each section should have a h2 heading with the texts Block Display, Inline-Block Display, and Flex Display respectively. Move the three colored boxes into the first section for now.

Tailwind

Need a hint?

Use three section elements inside main. Add h2 headings with the exact texts. Put the boxes inside the first section.

3

Apply inline-block display to boxes in the second section

In the second section with heading Inline-Block Display, add three div boxes with the same colors and texts as before. Add the Tailwind class inline-block along with p-4 and text-white to each box.

Tailwind

  
    Inline-Block Display
    
  

Need a hint?

Add three div boxes inside the second section. Use inline-block class with padding and white text.

4

Use flex display to arrange boxes in the third section

In the third section with heading Flex Display, add a container div with the Tailwind class flex. Inside it, add three div boxes with the same colors and texts as before, each with p-4 and text-white classes.

Tailwind

  
    Flex Display
    
  

Need a hint?

Add a div with class flex inside the third section. Put three colored boxes inside it with padding and white text.