Tailwind with React components - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Tailwind class that makes the text blue.

Tailwind

function BlueText() {
  return <p className="[1]">This text is blue.</p>;
}

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

Atext-blue-500

Btext-red-500

Cbg-blue-500

Dfont-bold

Attempts:

3 left

💡 Hint

Common Mistakes

Using background color class instead of text color.

Using a color class for red instead of blue.

The text-blue-500 class colors the text blue in Tailwind CSS.

2fill in blank

medium

Complete the code to add padding of 4 units using Tailwind.

Tailwind

function PaddedBox() {
  return <div className="[1] bg-gray-100">Content inside padded box</div>;
}

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

Am-4

Bp-4

Cpt-4

Dpx-4

Attempts:

3 left

💡 Hint

Common Mistakes

Using margin instead of padding.

Using padding only on top or horizontal sides.

The p-4 class adds padding on all sides with size 4 in Tailwind CSS.

3fill in blank

hard

Fix the error in the React component to apply Tailwind classes correctly.

Tailwind

function Button() {
  return <button class=[1]>Click me</button>;
}

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

A"bg-green-500 text-white px-4 py-2 rounded"

B{bg-green-500 text-white px-4 py-2 rounded}

Cbg-green-500 text-white px-4 py-2 rounded

D'bg-green-500 text-white px-4 py-2 rounded'

Attempts:

3 left

💡 Hint

Common Mistakes

Using class instead of className.

Not wrapping the class string in quotes.

In React JSX, className expects a string. The string must be inside quotes. Also, the attribute name should be className, not class.

4fill in blank

hard

Fill both blanks to create a responsive Tailwind button that is blue on small screens and green on medium screens.

Tailwind

function ResponsiveButton() {
  return <button className="[1] [2] px-4 py-2 rounded">Click me</button>;
}

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

Abg-blue-500

Bbg-green-500

Cmd:bg-green-500

Dsm:bg-blue-500

Attempts:

3 left

💡 Hint

Common Mistakes

Using color classes without responsive prefixes.

Mixing up the order of responsive classes.

The sm:bg-blue-500 class applies blue background on small screens, and md:bg-green-500 applies green background on medium screens and up.

5fill in blank

hard

Fill all three blanks to create a React component with a Tailwind card that has shadow, padding, and rounded corners.

Tailwind

function Card() {
  return (
    <div className="[1] [2] [3] bg-white">
      <h2 className="text-xl font-bold mb-2">Card Title</h2>
      <p>This is a card with shadow, padding, and rounded corners.</p>
    </div>
  );
}

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

Ashadow-lg

Bp-6

Crounded-lg

Dborder

Attempts:

3 left

💡 Hint

Common Mistakes

Using border instead of shadow for card effect.

Forgetting to add padding or rounded corners.

shadow-lg adds a large shadow, p-6 adds padding, and rounded-lg rounds the corners of the card.