Form input patterns in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a rounded border to the input field using Tailwind CSS.

Tailwind

<input type="text" class="border [1] p-2" placeholder="Enter your name">

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

Abg-blue-500

Bshadow-md

Ctext-center

Drounded-lg

Attempts:

3 left

💡 Hint

Common Mistakes

Using background color classes instead of border shape classes.

Forgetting to include the border class itself.

The rounded-lg class adds a smooth rounded border to the input field.

2fill in blank

medium

Complete the code to make the input field full width and add padding inside it.

Tailwind

<input type="email" class="[1] p-3 border rounded" placeholder="Email address">

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

Aw-full

Bw-1/2

Ch-full

Dmax-w-xs

Attempts:

3 left

💡 Hint

Common Mistakes

Using height classes instead of width classes.

Using fractional widths that don't fill the container.

The w-full class makes the input take the full width of its container.

3fill in blank

hard

Fix the error in the code to add a blue border on focus for the input field.

Tailwind

<input type="password" class="border rounded p-2 focus:[1]" placeholder="Password">

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

Aborder-blue-500

Bbg-blue-500

Ctext-blue-500

Dborder-red-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using background color classes instead of border color classes.

Forgetting the focus: prefix.

The focus:border-blue-500 class changes the border color to blue when the input is focused.

4fill in blank

hard

Fill both blanks to create a textarea with a gray background and padding.

Tailwind

<textarea class="[1] [2] border rounded" placeholder="Your message"></textarea>

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

Abg-gray-100

Bp-4

Ctext-lg

Dm-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin classes instead of padding.

Using text size classes instead of background color.

The bg-gray-100 class adds a light gray background, and p-4 adds padding inside the textarea.

5fill in blank

hard

Fill all three blanks to create a submit button with green background, white text, and rounded corners.

Tailwind

<button class="[1] [2] [3] font-bold py-2 px-4">Submit</button>

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

Abg-green-500

Btext-white

Crounded

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using border class instead of rounded for corners.

Forgetting to set text color for contrast.

bg-green-500 sets a green background, text-white makes the text white, and rounded adds rounded corners.