Top, right, bottom, left offsets in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a top offset of 4 units using Tailwind CSS.

Tailwind

<div class="relative [1]">Content</div>

Drag options to blanks, or click blank then click option'

Abottom-4

Bleft-4

Ctop-4

Dright-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left-4' instead of 'top-4' to move the element down.

Forgetting to add 'relative' or 'absolute' positioning to the element.

The class top-4 adds a top offset of 1rem (4 units) when the element is positioned.

2fill in blank

medium

Complete the code to add a right offset of 8 units using Tailwind CSS.

Tailwind

<div class="absolute [1]">Box</div>

Drag options to blanks, or click blank then click option'

Atop-8

Bright-8

Cbottom-8

Dleft-8

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left-8' instead of 'right-8' to move the element from the right.

Not setting the element's position to 'absolute' or 'relative'.

The class right-8 moves the element 2rem (8 units) away from the right edge.

3fill in blank

hard

Fix the error in the code to correctly add a bottom offset of 2 units using Tailwind CSS.

Tailwind

<div class="relative [1]">Footer</div>

Drag options to blanks, or click blank then click option'

Abottom_2

Bbottom2

Cbottom--2

Dbottom-2

Attempts:

3 left

💡 Hint

Common Mistakes

Writing 'bottom2' without a dash.

Using underscores or double dashes instead of a single dash.

The correct Tailwind class for bottom offset is bottom-2. It uses a dash, not other symbols.

4fill in blank

hard

Fill both blanks to add left and top offsets of 6 units using Tailwind CSS.

Tailwind

<div class="absolute [1] [2]">Box</div>

Drag options to blanks, or click blank then click option'

Aleft-6

Btop-6

Cright-6

Dbottom-6

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up left and right classes.

Forgetting to add positioning like 'absolute' or 'relative'.

The classes left-6 and top-6 add 1.5rem (6 units) offsets from the left and top edges respectively.

5fill in blank

hard

Fill all three blanks to add top, right, and bottom offsets of 1, 3, and 5 units respectively using Tailwind CSS.

Tailwind

<div class="relative [1] [2] [3]">Content</div>

Drag options to blanks, or click blank then click option'

Atop-1

Bright-3

Cbottom-5

Dleft-5

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left-5' instead of 'bottom-5' for the bottom offset.

Mixing the order of classes incorrectly.

The classes top-1, right-3, and bottom-5 add offsets of 0.25rem, 0.75rem, and 1.25rem respectively from the top, right, and bottom edges.

Practice

1. Which Tailwind class moves an element 1rem down from the top edge when it has relative positioning?

easy

A. right-4

B. bottom-4

C. left-4

D. top-4

Solution

1. Step 1: Understand Tailwind spacing scale

   In Tailwind, 4 equals 1rem spacing.

2. Step 2: Identify offset direction

   bottom-4 moves the element 1rem down from the top edge when positioned.

3. Final Answer:

   bottom-4 -> Option B

4. Quick Check:

   Bottom offset 1rem = bottom-4 [OK]

Hint: Bottom offset uses bottom- plus spacing number [OK]

Common Mistakes:

• Confusing top with bottom classes
• Using offset classes without positioning
• Mixing left/right with top offsets

2. Which is the correct Tailwind class to move an element 2rem to the right from its container edge?

easy

A. left-8

B. right-2

C. right-8

D. top-8

Solution

1. Step 1: Know Tailwind spacing values

   Spacing 8 equals 2rem in Tailwind.

2. Step 2: Match direction and spacing

   left-8 moves element 2rem to the right from its container edge.

3. Final Answer:

   left-8 -> Option A

4. Quick Check:

   Left offset 2rem = left-8 [OK]

Hint: Left offset uses left- plus spacing number [OK]

Common Mistakes:

• Using right-2 which is 0.5rem, not 2rem
• Confusing left and right classes
• Using top or bottom classes for horizontal offset

3. What will be the visual effect of this HTML snippet?

<div class="relative">
  <div class="absolute top-6 left-4">Box</div>
</div>

medium

A. The inner box stays at the top-left corner with no offset.

B. The inner box moves 1.5rem up and 1rem left inside the relative container.

C. The inner box moves 6rem down and 4rem right inside the relative container.

D. The inner box moves 1.5rem down and 1rem right inside the relative container.

Solution

1. Step 1: Understand Tailwind spacing scale

   top-6 means 1.5rem down, left-4 means 1rem right offset.

2. Step 2: Positioning context

   The parent is relative, so absolute child offsets from parent's edges.

3. Final Answer:

   The inner box moves 1.5rem down and 1rem right inside the relative container. -> Option D

4. Quick Check:

   top-6 = 1.5rem down, left-4 = 1rem right [OK]

Hint: Absolute inside relative uses offsets from parent edges [OK]

Common Mistakes:

• Thinking top-6 moves element up
• Ignoring relative positioning on parent
• Confusing left offset direction

4. Identify the error in this Tailwind usage:

<div class="absolute top-4 right-4">Hello</div>

when the parent has no positioning class.

medium

A. No error; offsets work relative to viewport by default.

B. The classes top-4 and right-4 are invalid.

C. Offsets won't work as expected because parent is not positioned.

D. The element must have relative class instead of absolute.

Solution

1. Step 1: Understand positioning context

   An absolute element positions relative to nearest positioned ancestor.

2. Step 2: Check parent positioning

   If parent has no position (static by default), offsets relate to viewport, which may cause unexpected placement.

3. Final Answer:

   Offsets won't work as expected because parent is not positioned. -> Option C

4. Quick Check:

   Absolute needs positioned parent for expected offsets [OK]

Hint: Absolute offsets need positioned parent (relative/absolute/fixed) [OK]

Common Mistakes:

• Assuming offsets always relate to parent
• Thinking classes are invalid
• Confusing absolute with relative positioning

5. You want to place a notification badge 0.75rem from the top and 0.5rem from the right inside a relative container. Which Tailwind classes achieve this?

hard

A. top-3 right-2

B. top-2 right-3

C. top-4 right-4

D. top-6 right-1

Solution

1. Step 1: Match spacing scale to rem values

   In Tailwind, 3 equals 0.75rem and 2 equals 0.5rem spacing.

2. Step 2: Assign correct classes for top and right offsets

   Use top-3 for 0.75rem top offset and right-2 for 0.5rem right offset.

3. Final Answer:

   top-3 right-2 -> Option A

4. Quick Check:

   top-3 = 0.75rem, right-2 = 0.5rem [OK]

Hint: Use Tailwind spacing scale: 3=0.75rem, 2=0.5rem for offsets [OK]

Common Mistakes:

• Mixing up spacing numbers and rem values
• Using larger spacing than needed
• Forgetting to set parent position to relative