Text transform (uppercase, lowercase) in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text uppercase using Tailwind CSS.

Tailwind

<p class="[1]">hello world</p>

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

Atext-normal-case

Btext-lowercase

Ctext-capitalize

Duppercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-lowercase which makes text lowercase.

Using text-capitalize which only capitalizes first letters.

The uppercase class in Tailwind CSS transforms text to uppercase.

2fill in blank

medium

Complete the code to make the text lowercase using Tailwind CSS.

Tailwind

<span class="[1]">HELLO WORLD</span>

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

Alowercase

Btext-uppercase

Ctext-capitalize

Dtext-normal-case

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-uppercase which makes text uppercase.

Using text-capitalize which only capitalizes first letters.

The lowercase class in Tailwind CSS transforms text to lowercase.

3fill in blank

hard

Fix the error in the code to correctly transform text to capitalized form using Tailwind CSS.

Tailwind

<div class="[1]">hello world</div>

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

Atext-uppercase

Bcapitalize

Ctext-normal-case

Dtext-lowercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using text-uppercase which makes all letters uppercase.

Using text-lowercase which makes all letters lowercase.

The capitalize class capitalizes the first letter of each word in Tailwind CSS.

4fill in blank

hard

Fill both blanks to create a paragraph with uppercase text and normal font weight using Tailwind CSS.

Tailwind

<p class="[1] [2]">This is important!</p>

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

Auppercase

Bfont-bold

Cfont-normal

Dtext-lowercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using font-bold instead of font-normal.

Using text-lowercase instead of uppercase.

Use uppercase to make text uppercase and font-normal for normal font weight.

5fill in blank

hard

Fill all three blanks to create a heading with lowercase text, bold font, and centered alignment using Tailwind CSS.

Tailwind

<h1 class="[1] [2] [3]">Welcome Home</h1>

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

Atext-uppercase

Bfont-bold

Clowercase

Dtext-center

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up uppercase and lowercase classes.

Forgetting to center the text.

Use lowercase for lowercase text, font-bold for bold font, and text-center to center the text.