Order and self-alignment in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the first box appear first using Tailwind's order utility.

Tailwind

<div class="flex">
  <div class="order-[1] bg-blue-500 p-4 text-white">Box 1</div>
  <div class="order-1 bg-green-500 p-4 text-white">Box 2</div>
</div>

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

A0

B2

C3

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using order-1 on both boxes so order doesn't change.

Using order values greater than 3 which are not standard in Tailwind.

Setting order-0 on Box 1 makes it appear before Box 2 which has order-1. Lower order values appear first.

2fill in blank

medium

Complete the code to center the third box vertically using Tailwind's self-alignment utilities.

Tailwind

<div class="flex h-32">
  <div class="self-start bg-red-400 p-4">Box 1</div>
  <div class="self-end bg-yellow-400 p-4">Box 2</div>
  <div class="self-[1] bg-green-400 p-4">Box 3</div>
</div>

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

Acenter

Bstretch

Cauto

Dbaseline

Attempts:

3 left

💡 Hint

Common Mistakes

Using self-auto which inherits alignment from the container.

Using self-stretch which makes the item fill the container height.

Using self-center centers the third box vertically within the flex container.

3fill in blank

hard

Fix the error in the code to make the first box appear last using Tailwind's order utility.

Tailwind

<div class="flex">
  <div class="order-[1] bg-purple-600 p-4 text-white">Box 1</div>
  <div class="order-1 bg-pink-600 p-4 text-white">Box 2</div>
  <div class="order-2 bg-indigo-600 p-4 text-white">Box 3</div>
</div>

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

A0

B1

C2

D3

Attempts:

3 left

💡 Hint

Common Mistakes

Using order-0 or order-1 which place the box earlier.

Using order-2 which places it before Box 3.

Setting order-3 on Box 1 places it after Box 2 (order-1) and Box 3 (order-2), making it appear last.

4fill in blank

hard

Fill both blanks to create a flex container where the second box appears first and the third box is centered vertically.

Tailwind

<div class="flex h-40">
  <div class="order-2 bg-red-400 p-4">Box 1</div>
  <div class="order-[1] bg-green-400 p-4">Box 2</div>
  <div class="order-3 self-[2] bg-blue-400 p-4">Box 3</div>
</div>

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

A1

Bcenter

Cstart

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using order-0 on Box 2 which places it before Box 3 incorrectly.

Using self-start which aligns Box 3 at the top.

Setting order-1 on Box 2 makes it appear before Box 1 (order-2). Using self-center on Box 3 centers it vertically.

5fill in blank

hard

Fill all three blanks to create a flex container where Box A appears last, Box B is centered vertically, and Box C appears first.

Tailwind

<div class="flex h-48">
  <div class="order-[1] bg-yellow-400 p-4">Box A</div>
  <div class="order-2 self-[2] bg-pink-400 p-4">Box B</div>
  <div class="order-[3] bg-teal-400 p-4">Box C</div>
</div>

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

A3

Bcenter

C0

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using order-1 or order-2 for Box A which places it earlier.

Not using self-center for Box B so it stays top aligned.

Using order-1 or order-2 for Box C which places it after other boxes.

Box A with order-3 appears last. Box B with self-center is vertically centered. Box C with order-0 appears first.