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.