Button component patterns in Tailwind - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this button look like in the browser?

Given this Tailwind CSS button code, what is the visual style you will see when rendered?

Tailwind

<button class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded">Click me</button>

A A transparent button with blue text and no hover effect.

B A red button with white text and rounded corners that becomes darker red on hover.

C A blue button with white text, rounded corners, and a darker blue background on hover.

D A white button with blue text and square corners that changes to light blue on hover.

💡 Hint

Look at the background and text color classes, and the hover prefix.

The class bg-blue-600 sets a medium blue background, text-white makes the text white, rounded adds rounded corners, and hover:bg-blue-700 changes the background to a darker blue when hovered.

❓ selector

intermediate

Which Tailwind class applies padding inside a button?

You want to add vertical and horizontal padding inside a button. Which class correctly adds 0.5rem vertical and 1rem horizontal padding?

A pad-2x4

B p-2-4

C padding-y-2 padding-x-4

D py-2 px-4

💡 Hint

Tailwind uses 'py' for vertical padding and 'px' for horizontal padding.

In Tailwind, 'py-2' means padding-top and padding-bottom of 0.5rem, and 'px-4' means padding-left and padding-right of 1rem.

🧠 Conceptual

advanced

Why use 'focus:outline-none' with 'focus:ring' on buttons?

Consider this button code snippet:

<button class="focus:outline-none focus:ring-2 focus:ring-blue-500">Press</button>

Why is it important to use both 'focus:outline-none' and 'focus:ring' classes together?

A 'focus:outline-none' removes the default focus outline, and 'focus:ring' adds a custom visible ring for accessibility.

B 'focus:outline-none' disables all focus styles, and 'focus:ring' disables hover effects.

C 'focus:outline-none' adds a shadow, and 'focus:ring' removes the shadow on focus.

D 'focus:outline-none' makes the button unclickable, and 'focus:ring' makes it clickable.

💡 Hint

Think about keyboard users and visible focus indicators.

Removing the default outline without adding a visible focus style harms accessibility. Using 'focus:ring' adds a clear ring so keyboard users can see focus.

❓ layout

advanced

How to center a button horizontally and vertically inside a container?

You have a container div and a button inside it. Which Tailwind classes on the container will center the button both horizontally and vertically?

Tailwind

<div class="???">
  <button class="bg-green-500 text-white px-4 py-2 rounded">Submit</button>
</div>

A flex items-center justify-center h-64

B inline-flex items-start justify-end h-64

C grid place-items-start h-64

D block text-center h-64

💡 Hint

Use flexbox to center items both ways.

'flex' makes the container a flexbox, 'items-center' centers vertically, 'justify-center' centers horizontally, and 'h-64' gives height so centering is visible.

❓ accessibility

expert

Which button code is most accessible for screen readers and keyboard users?

Choose the button code that best supports accessibility:

A <button class="p-2">×</button>

B <button aria-label="Close modal" class="p-2">×</button>

C <div role="button" tabindex="0" class="p-2">×</div>

D <span class="p-2" onclick="closeModal()">×</span>

💡 Hint

Consider semantic elements and ARIA labels.

Using a