Transition utilities in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a smooth transition effect to the button background color.

Tailwind

<button class="bg-blue-500 hover:bg-blue-700 [1]">Click me</button>

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

Aduration-500

Bbg-red-500

Chover:text-white

Dtransition-colors

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color class instead of a transition class.

Forgetting to add any transition class.

The transition-colors class enables smooth color changes on hover.

2fill in blank

medium

Complete the code to set the transition duration to 700 milliseconds.

Tailwind

<div class="transition-opacity [1] opacity-0 hover:opacity-100">Fade in text</div>

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

Aduration-300

Bduration-700

Cease-in-out

Ddelay-700

Attempts:

3 left

💡 Hint

Common Mistakes

Using a delay class instead of duration.

Choosing a shorter duration like 300ms.

The duration-700 class sets the transition duration to 700ms.

3fill in blank

hard

Fix the error in the code to make the element smoothly scale on hover.

Tailwind

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

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

Atransition-transform

Btransition-opacity

Cduration-1000

Dease-linear

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-opacity which only affects opacity.

Forgetting to add any transition class.

The transition-transform class enables smooth transitions for transform properties like scale.

4fill in blank

hard

Fill both blanks to create a button that changes background color and text color smoothly on hover.

Tailwind

<button class="[1] [2] hover:bg-green-600 hover:text-white">Hover me</button>

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

Atransition-colors

Bduration-500

Ctransition-opacity

Dease-in

Attempts:

3 left

💡 Hint

Common Mistakes

Using transition-opacity instead of transition-colors.

Forgetting to set a duration class.

transition-colors enables smooth color changes, and duration-500 sets the transition time to 500ms.

5fill in blank

hard

Fill all three blanks to create a div that fades in with a delay and smooth easing on hover.

Tailwind

<div class="opacity-0 [1] [2] [3] [4] hover:opacity-100">Fade in content</div>

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

Atransition-opacity

Bdelay-300

Cease-in-out

Dduration-700

Attempts:

3 left

💡 Hint

Common Mistakes

Using delay-700 instead of duration.

Forgetting to add easing for smooth effect.

transition-opacity enables fading, duration-700 sets the transition duration, delay-300 adds a 300ms delay before starting, and ease-in-out makes the transition smooth.