Button component patterns in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a blue button with padding and rounded corners using Tailwind CSS.

Tailwind

<button class="bg-blue-500 [1] rounded">Click me</button>

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

Atext-center

Bm-4

Cp-2

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin m-4 instead of padding.

Forgetting to add padding makes the button text cramped.

The p-2 class adds padding inside the button, making it look better. The other options do not add padding.

2fill in blank

medium

Complete the code to make the button text white and bold using Tailwind CSS.

Tailwind

<button class="bg-green-600 p-3 rounded [1]">Submit</button>

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

Aitalic

Bunderline

Ctext-gray-700

Dtext-white font-bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using italic or underline instead of bold.

Choosing a gray text color that doesn't contrast well.

The classes text-white and font-bold make the text white and bold. Other options change style differently.

3fill in blank

hard

Fix the error in the button code to make it have a hover effect that darkens the background.

Tailwind

<button class="bg-red-500 p-3 rounded [1]">Delete</button>

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

Ahover:text-red-700

Bhover:bg-red-700

Cfocus:bg-red-700

Dactive:bg-red-700

Attempts:

3 left

💡 Hint

Common Mistakes

Using hover:text-* changes text color, not background.

Using focus: or active: instead of hover:.

The hover:bg-red-700 class changes the background color when the mouse is over the button, creating a hover effect.

4fill in blank

hard

Fill both blanks to create a button that is disabled with gray background and cursor not-allowed style.

Tailwind

<button class="p-3 rounded [1] [2]" disabled>Disabled</button>

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

Abg-gray-400

Bcursor-not-allowed

Cbg-blue-500

Dhover:bg-blue-700

Attempts:

3 left

💡 Hint

Common Mistakes

Using blue background classes which look active.

Forgetting to change the cursor style.

The bg-gray-400 class gives a gray background, and cursor-not-allowed changes the mouse cursor to show the button is disabled.

5fill in blank

hard

Fill all three blanks to create a responsive button that is full width on small screens and auto width on medium and larger screens.

Tailwind

<button class="[1] [2] [3] p-3 rounded bg-purple-600 text-white">Responsive</button>

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

Aw-full

Bmd:w-auto

Cblock

Dinline-block

Attempts:

3 left

💡 Hint

Common Mistakes

Using inline-block which does not fill width.

Not using responsive prefixes for width changes.

w-full makes the button full width on small screens, md:w-auto sets width to auto on medium and larger screens, and block makes the button behave like a block element so width applies correctly.