Flex container activation in Tailwind - Mini Project: Build & Apply

Flex container activation

📖 Scenario: You are building a simple webpage section that shows three colored boxes side by side. To arrange these boxes horizontally, you need to activate the flex container using Tailwind CSS.

🎯 Goal: Create a container that uses Tailwind CSS flexbox utilities to display three colored boxes in a row with equal spacing.

📋 What You'll Learn

Use Tailwind CSS classes to create a flex container

Add three boxes inside the container with distinct background colors

Ensure the boxes are arranged horizontally side by side

Use semantic HTML elements and accessible attributes

💡 Why This Matters

🌍 Real World

Flexbox is a common way to arrange items horizontally or vertically in web layouts. Activating a flex container is the first step to using this powerful layout tool.

💼 Career

Web developers often use Tailwind CSS to quickly build responsive and accessible layouts. Knowing how to activate and control flex containers is essential for modern frontend development.

1

Create the container and boxes

Write the HTML code to create a <section> element with the class container. Inside it, add three <div> elements with the classes box1, box2, and box3 respectively. Each box should have text content: Box 1, Box 2, and Box 3.

Tailwind

Need a hint?

Start by creating a <section> with class container. Then add three <div> elements inside it with the correct classes and text.

2

Add Tailwind flex container class

Add the Tailwind CSS class flex to the <section> element with class container to activate the flex container.

Tailwind

  
  Box 1
  Box 2
  Box 3

Need a hint?

To make the container a flex container, add the class flex alongside container in the <section> tag.

3

Add background colors and spacing to boxes

Add Tailwind CSS classes to the boxes: bg-red-400 to box1, bg-green-400 to box2, and bg-blue-400 to box3. Also add p-4 for padding and m-2 for margin to each box.

Tailwind

  
  Box 1
  Box 2
  Box 3

Need a hint?

Use Tailwind classes bg-red-400, bg-green-400, bg-blue-400 for colors, and p-4 and m-2 for padding and margin on each box.

4

Make the container responsive and accessible

Add the Tailwind class justify-center to the <section> element to center the boxes horizontally. Also add aria-label="Color boxes container" to the <section> for accessibility.

Tailwind

  
  Box 1
  Box 2
  Box 3

Need a hint?

Center the boxes by adding justify-center to the container's class list. Add aria-label="Color boxes container" for screen readers.