Odd and even row styling in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a background color to odd table rows using Tailwind CSS.

Tailwind

<table class="min-w-full">
  <tbody>
    <tr class="[1]">
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

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

Abg-gray-100

Beven:bg-gray-100

Codd:bg-gray-100

Dhover:bg-gray-100

Attempts:

3 left

💡 Hint

Common Mistakes

Using even:bg-gray-100 instead of odd:bg-gray-100.

Applying background color without the odd: prefix.

The odd:bg-gray-100 class applies a gray background only to odd rows.

2fill in blank

medium

Complete the code to add a background color to even table rows using Tailwind CSS.

Tailwind

<table class="min-w-full">
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr class="[1]">
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

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

Aodd:bg-blue-100

Bhover:bg-blue-100

Cbg-blue-100

Deven:bg-blue-100

Attempts:

3 left

💡 Hint

Common Mistakes

Using odd:bg-blue-100 instead of even:bg-blue-100.

Applying background color without the even: prefix.

The even:bg-blue-100 class applies a blue background only to even rows.

3fill in blank

hard

Fix the error in the code to correctly style odd rows with a green background using Tailwind CSS.

Tailwind

<table class="min-w-full">
  <tbody>
    <tr class="[1]">
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

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

Aodd:bg-green-500

Bodd:bg-green-200

Codd:bg-green

Dodd:bg-green-

Attempts:

3 left

💡 Hint

Common Mistakes

Using incomplete or invalid color classes like odd:bg-green or odd:bg-green-.

Using a very light shade like 200 which might be hard to see.

The correct Tailwind class for a green background with medium shade is odd:bg-green-500.

4fill in blank

hard

Fill both blanks to style odd rows with pink background and even rows with yellow background using Tailwind CSS.

Tailwind

<table class="min-w-full">
  <tbody>
    <tr class="[1] [2]">
      <td>Row 1</td>
    </tr>
    <tr class="[1] [2]">
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

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

Aodd:bg-pink-300

Beven:bg-yellow-200

Codd:bg-yellow-200

Deven:bg-pink-300

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping odd and even classes.

Using the wrong color names or shades.

Use odd:bg-pink-300 for odd rows and even:bg-yellow-200 for even rows.

5fill in blank

hard

Fill all three blanks to create a table where odd rows have purple background, even rows have teal background, and rows highlight on hover using Tailwind CSS.

Tailwind

<table class="min-w-full">
  <tbody>
    <tr class="[1] [2] [3]">
      <td>Row 1</td>
    </tr>
    <tr class="[1] [2] [3]">
      <td>Row 2</td>
    </tr>
  </tbody>
</table>

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

Aodd:bg-purple-400

Beven:bg-teal-300

Chover:bg-gray-200

Dhover:bg-purple-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover classes that override odd/even backgrounds incorrectly.

Mixing up color shades or prefixes.

Use odd:bg-purple-400 for odd rows, even:bg-teal-300 for even rows, and hover:bg-gray-200 to highlight rows on hover.