Opacity modifiers on colors in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to apply a 50% opacity to the background color using Tailwind CSS.

Tailwind

<div class="bg-blue-500 [1]">Hello</div>

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

Abg-blue-50

Bbg-opacity-50

Ctext-opacity-50

Dopacity-50

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity-50 affects the whole element, not just background color.

Using text-opacity-50 affects text color opacity, not background.

In Tailwind CSS, bg-opacity-50 sets the background color opacity to 50%.

2fill in blank

medium

Complete the code to apply 25% opacity to the text color using Tailwind CSS.

Tailwind

<p class="text-red-600 [1]">Warning message</p>

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

Atext-red-25

Bbg-opacity-25

Copacity-25

Dtext-opacity-25

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity-25 changes the whole element's opacity.

Using bg-opacity-25 affects background, not text.

The class text-opacity-25 sets the text color opacity to 25% in Tailwind CSS.

3fill in blank

hard

Fix the error in the code to correctly apply 75% opacity to the background color.

Tailwind

<div class="bg-green-400 [1]">Success</div>

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

Abg-opacity-75

Bopacity-75

Ctext-opacity-75

Dbg-green-75

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity-75 changes the whole element's opacity, not just background.

Using text-opacity-75 affects text color opacity.

bg-opacity-75 correctly sets the background color opacity to 75% in Tailwind CSS.

4fill in blank

hard

Fill both blanks to create a button with blue background at 40% opacity and white text at 90% opacity.

Tailwind

<button class="bg-blue-600 [1] text-white [2]">Click me</button>

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

Abg-opacity-40

Btext-opacity-90

Copacity-40

Dbg-opacity-90

Attempts:

3 left

💡 Hint

Common Mistakes

Using opacity-40 affects the whole button, not just background.

Mixing up background and text opacity classes.

bg-opacity-40 sets background opacity to 40%, and text-opacity-90 sets text opacity to 90%.

5fill in blank

hard

Fill all three blanks to create a card with red background at 60% opacity, black text at 80% opacity, and overall element opacity at 90%.

Tailwind

<div class="bg-red-500 [1] text-black [2] [3]">Card content</div>

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

Abg-opacity-60

Btext-opacity-80

Copacity-90

Dbg-opacity-90

Attempts:

3 left

💡 Hint

Common Mistakes

Using bg-opacity-90 instead of opacity-90 for overall opacity.

Confusing text opacity with overall opacity.

bg-opacity-60 sets background opacity to 60%, text-opacity-80 sets text opacity to 80%, and opacity-90 sets the whole element's opacity to 90%.