Transition property selection in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a transition on the background color.

Tailwind

<button class="transition [1] duration-500 bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  Click me
</button>

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

Atransition-shadow

Btransition-opacity

Ctransition-colors

Dtransition-transform

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-opacity when background color changes

Using transition-transform which affects movement, not color

The transition-colors class applies transitions to color-related properties like background color.

2fill in blank

medium

Complete the code to apply a transition on the transform property.

Tailwind

<div class="transform hover:scale-110 [1] duration-300">
  Hover me
</div>

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

Atransition-opacity

Btransition-transform

Ctransition-colors

Dtransition-shadow

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-colors when transform changes

Using transition-opacity which affects transparency

The transition-transform class applies transitions to transform properties like scaling.

3fill in blank

hard

Fix the error in the code to apply a transition on the shadow property.

Tailwind

<button class="shadow-lg hover:shadow-xl [1] duration-400">
  Shadow Button
</button>

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

Atransition-shadow

Btransition-opacity

Ctransition-colors

Dtransition-transform

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-colors for shadow changes

Using transition-opacity which does not affect shadows

The transition-shadow class applies transitions to shadow properties.

4fill in blank

hard

Fill both blanks to apply transitions on both color and transform properties.

Tailwind

<div class="transform hover:text-red-500 hover:rotate-6 [1] [2] duration-500">
  Rotate and Color
</div>

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

Atransition-colors

Btransition-opacity

Ctransition-transform

Dtransition-shadow

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-opacity instead of transition-transform

Missing one of the transition classes

Use transition-colors for color changes and transition-transform for rotation.

5fill in blank

hard

Fill all three blanks to apply transitions on color, shadow, and transform properties.

Tailwind

<button class="transform hover:bg-green-600 hover:shadow-2xl hover:scale-105 [1] [2] [3] duration-700 text-white font-semibold py-3 px-6 rounded">
  Fancy Button
</button>

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

Atransition-shadow

Btransition-colors

Ctransition-transform

Dtransition-opacity

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-opacity which does not affect these properties

Forgetting one of the transition classes

Use transition-colors for background color, transition-shadow for shadow, and transition-transform for scaling.