Responsive card grid in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a responsive grid container using Tailwind CSS.

Tailwind

<div class="grid [1] gap-4">
  <!-- Cards go here -->
</div>

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

Ablock

Bflex

Cgrid-cols-3

Dinline-grid

Attempts:

3 left

💡 Hint

Common Mistakes

Using flex instead of grid classes.

Using block which does not create a grid.

Using inline-grid which is less common for this layout.

The class grid-cols-3 sets the grid to have 3 columns, making it a responsive grid container.

2fill in blank

medium

Complete the code to make the grid responsive with 1 column on small screens and 3 columns on medium screens.

Tailwind

<div class="grid [1] md:grid-cols-3 gap-4">
  <!-- Cards go here -->
</div>

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

Agrid-cols

Bgrid-cols-1

Cgrid

Dcols

Attempts:

3 left

💡 Hint

Common Mistakes

Using grid-cols which is incomplete without specifying the number of columns.

Using cols which is not a Tailwind class.

Using grid which duplicates the existing grid class.

The class grid-cols-1 sets 1 column on small screens, while md:grid-cols-3 sets 3 columns on medium screens and larger, creating a responsive grid.

3fill in blank

hard

Fix the error in the card class to add padding using Tailwind CSS.

Tailwind

<div class="bg-white rounded shadow [1]">
  <h2 class="text-lg font-bold">Card Title</h2>
  <p>Card content goes here.</p>
</div>

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

Ap-4

Bpadding-4

Cpad-4

Dp4

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding-4 which is not a Tailwind class.

Using pad-4 which is invalid.

Using p4 missing the dash.

The correct Tailwind class for padding is p-4. Other options are invalid or incorrect.

4fill in blank

hard

Fill both blanks to create a responsive card grid with 2 columns on small screens and 4 columns on large screens.

Tailwind

<div class="grid [1] lg:[2] gap-6">
  <!-- Cards go here -->
</div>

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

Agrid-cols-2

Bgrid-cols-3

Cgrid-cols-4

Dgrid-cols-1

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same number of columns for both screen sizes.

Using invalid Tailwind classes.

Forgetting the responsive prefix lg:.

Use grid-cols-2 for small screens and lg:grid-cols-4 for large screens to create a responsive grid.

5fill in blank

hard

Fill all three blanks to create a card with a shadow, rounded corners, and hover effect that changes background color.

Tailwind

<div class="bg-white [1] [2] hover:[3] transition-colors duration-300">
  <h3 class="text-xl font-semibold">Card Title</h3>
  <p>Card description text.</p>
</div>

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

Ashadow-lg

Brounded-md

Cbg-gray-100

Dp-6

Attempts:

3 left

💡 Hint

Common Mistakes

Using padding class instead of shadow or rounded classes.

Forgetting the hover prefix for background color.

Using invalid Tailwind class names.

The class shadow-lg adds a large shadow, rounded-md adds medium rounded corners, and hover:bg-gray-100 changes background color on hover.