Hidden and visibility control in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to hide the paragraph using Tailwind CSS.

Tailwind

<p class="[1]">This text is hidden.</p>

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

Ablock

Bvisible

Chidden

Dinline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visible' which actually shows the element.

Using 'block' or 'inline' which control display but do not hide.

The hidden class in Tailwind CSS hides the element completely.

2fill in blank

medium

Complete the code to make the div invisible but still take up space.

Tailwind

<div class="[1]">Invisible but space reserved</div>

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

Ahidden

Bsr-only

Copacity-0

Dinvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'hidden' which removes the element completely.

Using 'opacity-0' which makes it transparent but still clickable.

The invisible class makes the element invisible but it still occupies space on the page.

3fill in blank

hard

Fix the error in the code to hide the button on small screens only.

Tailwind

<button class="sm:[1]">Click me</button>

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

Ahidden

Bblock

Cinline-block

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'visible' which does not hide the element.

Using display classes like 'block' or 'inline-block' which show the element.

The sm:hidden class hides the button on small screens and larger.

4fill in blank

hard

Fill both blanks to make the image hidden on medium screens and visible on large screens.

Tailwind

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

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

Amd:hidden

Blg:block

Cmd:block

Dlg:hidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'lg:hidden' which hides on large screens instead of showing.

Using 'md:block' which shows on medium screens instead of hiding.

The md:hidden class hides the image on medium screens, and lg:block shows it again on large screens.

5fill in blank

hard

Fill all three blanks to make the text invisible on small screens, visible on medium, and hidden on large screens.

Tailwind

<p class="[1] [2] [3]">Responsive visibility text</p>

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

Asm:invisible

Bmd:visible

Clg:hidden

Dsm:hidden

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'sm:hidden' instead of 'sm:invisible' which removes element instead of making invisible.

Mixing up prefixes causing wrong screen sizes to apply.

The classes sm:invisible, md:visible, and lg:hidden control visibility on different screen sizes as required.