Negative margin usage in Tailwind - Mini Project: Build & Apply

Using Negative Margins with Tailwind CSS

📖 Scenario: You are creating a simple webpage layout where two colored boxes overlap slightly. This effect is achieved by using negative margins in Tailwind CSS.

🎯 Goal: Build a webpage with two boxes side by side. The second box should overlap the first box by using a negative left margin with Tailwind CSS classes.

📋 What You'll Learn

Use Tailwind CSS utility classes for styling.

Create two boxes with background colors and fixed width and height.

Apply a negative left margin to the second box to create an overlap effect.

Use semantic HTML elements and ensure the layout is responsive.

💡 Why This Matters

🌍 Real World

Negative margins are often used in web design to create overlapping elements for a modern and dynamic look. This technique helps in creating visually interesting layouts without complex CSS.

💼 Career

Understanding how to use Tailwind CSS utility classes, including negative margins, is valuable for frontend developers to build responsive and attractive user interfaces quickly.

1

Create the HTML structure with two boxes

Write the HTML code to create a <main> element containing two <div> elements. The first <div> should have the text Box 1 and the second <div> should have the text Box 2. Do not add any classes yet.

Tailwind

Need a hint?

Use a <main> tag to wrap the boxes. Inside it, add two <div> elements with the exact texts Box 1 and Box 2.

2

Add Tailwind classes for box size and colors

Add Tailwind CSS classes to both <div> elements to make each box 10rem wide and 10rem tall. Set the first box's background color to blue-500 and the second box's background color to green-500. Also add text-white and flex with items-center and justify-center to center the text inside each box.

Tailwind

  Box 1
  Box 2
  

Need a hint?

Use w-40 and h-40 for width and height (10rem each). Use bg-blue-500 for the first box and bg-green-500 for the second. Add text-white flex items-center justify-center to center the text.

3

Add layout with flex and negative margin

Add the Tailwind class flex to the <main> element to place the boxes side by side. Then add the class -ml-10 (negative margin-left) to the second <div> to make it overlap the first box by 2.5rem.

Tailwind

  Box 1
  Box 2
  

Need a hint?

Add flex to the <main> tag to align boxes horizontally. Add -ml-10 to the second box to shift it left and overlap the first box.

4

Make the layout responsive with padding

Add the Tailwind class p-4 to the <main> element to add padding around the boxes. This ensures the boxes do not touch the edges on small screens.

Tailwind

  Box 1
  Box 2
  

Need a hint?

Adding p-4 to the <main> element adds comfortable space around the boxes on all screen sizes.