Block, inline, and inline-block in Tailwind - Mini Project: Build & Apply

Understanding Block, Inline, and Inline-Block with Tailwind CSS

📖 Scenario: You are creating a simple webpage to display three boxes with different display styles. This will help you see how block, inline, and inline-block elements behave visually.

🎯 Goal: Build a webpage with three colored boxes labeled Block, Inline, and Inline-Block. Use Tailwind CSS classes to set their display styles accordingly and observe how they appear side by side or stacked.

📋 What You'll Learn

Create three <div> elements with text: 'Block', 'Inline', and 'Inline-Block'.

Use Tailwind CSS classes to make the first box display as block.

Use Tailwind CSS classes to make the second box display as inline.

Use Tailwind CSS classes to make the third box display as inline-block.

Add background colors and padding so the boxes are clearly visible.

Ensure the page uses semantic HTML and is responsive.

💡 Why This Matters

🌍 Real World

Understanding how block, inline, and inline-block elements behave is essential for building clean, responsive web layouts.

💼 Career

Web developers often use these display styles to control how elements appear and interact on a page, making this knowledge fundamental for front-end development.

1

Create the HTML structure with three boxes

Create a basic HTML5 skeleton with a <main> element containing three <div> elements. Each <div> should have the text: Block, Inline, and Inline-Block respectively.

Tailwind

    
    
    Display Types



    

Need a hint?

Remember to create three <div> elements inside the <main> tag with the exact texts.

2

Add Tailwind CSS classes for background and padding

Add Tailwind CSS classes to each <div> to give them distinct background colors and padding. Use bg-red-400 for the first, bg-green-400 for the second, and bg-blue-400 for the third. Also add p-4 for padding to all three.

Tailwind

    
    
    Display Types



    

Need a hint?

Use the exact Tailwind classes bg-red-400 p-4, bg-green-400 p-4, and bg-blue-400 p-4 on the three divs respectively.

3

Set display styles using Tailwind CSS classes

Add Tailwind CSS display classes to the three <div> elements. Use block for the first, inline for the second, and inline-block for the third.

Tailwind

    
    
    Display Types



    

Need a hint?

Use the Tailwind classes block, inline, and inline-block exactly on the three divs.

4

Add semantic and accessibility improvements

Add an aria-label attribute to the <main> element with the value Display type examples. Also add a role="region" attribute to <main> for accessibility.

Tailwind

    
    
    Display Types



    
    Block
    Inline
    Inline-Block

Need a hint?

Add role="region" and aria-label="Display type examples" exactly to the <main> tag.