Blur and brightness filters in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a blur effect to the image.

Tailwind

<img src="image.jpg" alt="Sample Image" class="[1]" />

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

Abrightness-50

Bopacity-75

Cblur-sm

Dcontrast-125

Attempts:

3 left

💡 Hint

Common Mistakes

Using brightness or opacity classes instead of blur.

Forgetting to add the class attribute.

The blur-sm class applies a small blur effect to the image.

2fill in blank

medium

Complete the code to make the image 75% bright using Tailwind.

Tailwind

<img src="image.jpg" alt="Sample Image" class="[1]" />

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

Abrightness-75

Bopacity-50

Cblur-lg

Dcontrast-150

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity instead of brightness.

Choosing a blur class instead of brightness.

The brightness-75 class reduces brightness to 75%.

3fill in blank

hard

Fix the error in the code to apply a medium blur effect.

Tailwind

<div class="[1]">Content</div>

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

Acontrast-90

Bblur-md

Copacity-90

Dbrightness-90

Attempts:

3 left

💡 Hint

Common Mistakes

Using brightness or opacity classes instead of blur.

Using invalid class names.

The blur-md class applies a medium blur effect.

4fill in blank

hard

Fill both blanks to apply a large blur and 50% brightness to the image.

Tailwind

<img src="image.jpg" alt="Sample" class="[1] [2]" />

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

Ablur-lg

Bbrightness-50

Copacity-50

Dcontrast-125

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing opacity with brightness.

Using wrong blur size classes.

blur-lg applies a large blur and brightness-50 sets brightness to 50%.

5fill in blank

hard

Fill all three blanks to create a div with medium blur, 75% brightness, and 125% contrast.

Tailwind

<div class="[1] [2] [3]">Text</div>

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

Ablur-md

Bbrightness-75

Ccontrast-125

Dopacity-75

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity instead of contrast.

Mixing up brightness and opacity classes.

The classes blur-md, brightness-75, and contrast-125 apply medium blur, 75% brightness, and 125% contrast respectively.