Top, right, bottom, left offsets in Tailwind - Mini Project: Build & Apply

Top, right, bottom, left offsets with Tailwind CSS

📖 Scenario: You are creating a simple webpage with a colored box. You want to position this box inside a container using offsets from the top, right, bottom, and left edges.

🎯 Goal: Build a webpage with a container and a colored box inside it. Use Tailwind CSS classes to set the box's offsets from the container's edges: top, right, bottom, and left.

📋 What You'll Learn

Create a container with relative positioning

Add a box inside the container with absolute positioning

Use Tailwind CSS classes to set the box's top offset to 4rem

Use Tailwind CSS classes to set the box's right offset to 2rem

Use Tailwind CSS classes to set the box's bottom offset to 1rem

Use Tailwind CSS classes to set the box's left offset to 3rem

Make sure the box has a visible background color and fixed size

💡 Why This Matters

🌍 Real World

Positioning elements precisely inside containers is common in web design for layouts, modals, tooltips, and more.

💼 Career

Knowing how to use CSS positioning and Tailwind offsets helps you build responsive and well-structured user interfaces efficiently.

1

Create the container and the box

Create a <div> with class relative named container. Inside it, add another <div> with class bg-blue-500 and fixed width w-24 and height h-24 named box.

Tailwind

Need a hint?

Use relative on the container to position the box absolutely inside it later.

2

Add absolute positioning to the box

Add the Tailwind CSS class absolute to the box <div> to position it absolutely inside the container.

Tailwind

Need a hint?

The absolute class lets you use top, right, bottom, and left offsets.

3

Set the top and right offsets

Add the Tailwind CSS classes top-16 and right-8 to the box <div> to set the top offset to 4rem and the right offset to 2rem.

Tailwind

Need a hint?

Use top-16 for 4rem and right-8 for 2rem offsets.

4

Set the bottom and left offsets

Add the Tailwind CSS classes bottom-4 and left-12 to the box <div> to set the bottom offset to 1rem and the left offset to 3rem.

Tailwind

Need a hint?

Use bottom-4 for 1rem and left-12 for 3rem offsets.