Table and data grid patterns in Tailwind - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic table with Tailwind CSS classes.

Tailwind

<table class="min-w-full divide-y divide-gray-200">
  <thead class="bg-gray-50">
    <tr>
      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
      <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
    </tr>
  </thead>
  <tbody class="bg-white divide-y divide-gray-200">
    <tr>
      <td class="px-6 py-4 whitespace-nowrap">Jane Cooper</td>
      <td class="px-6 py-4 whitespace-nowrap">[1]</td>
    </tr>
  </tbody>
</table>

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

ASoftware Engineer

Btext-center

Cborder

Dflex

Attempts:

3 left

💡 Hint

Common Mistakes

Putting a CSS class name instead of actual cell content.

Leaving the blank empty.

The blank is inside a table cell where the job title should appear. 'Software Engineer' is the correct content to fill the cell.

2fill in blank

medium

Complete the code to add a hover effect on table rows using Tailwind CSS.

Tailwind

<tbody class="bg-white divide-y divide-gray-200">
  <tr class="[1]">
    <td class="px-6 py-4 whitespace-nowrap">John Doe</td>
    <td class="px-6 py-4 whitespace-nowrap">Product Manager</td>
  </tr>
</tbody>

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

Ahover:bg-gray-100

Btext-gray-500

Cfont-bold

Dborder-b-2

Attempts:

3 left

💡 Hint

Common Mistakes

Using text color classes instead of hover background.

Using border classes that don't create hover effect.

The class 'hover:bg-gray-100' adds a light gray background when the user hovers over the table row.

3fill in blank

hard

Fix the error in the code to make the table responsive with horizontal scrolling.

Tailwind

<div class="overflow-x-[1]">
  <table class="min-w-full divide-y divide-gray-200">
    <!-- table content -->
  </table>
</div>

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

Ascroll

Bhidden

Cauto

Dvisible

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'overflow-x-scroll' which always shows scrollbar.

Using 'overflow-x-hidden' which hides overflow content.

The class 'overflow-x-auto' enables horizontal scrolling when the table is wider than its container, making it responsive.

4fill in blank

hard

Fill both blanks to create a striped table with alternating row colors.

Tailwind

<tbody class="bg-white divide-y-0 divide-gray-200 [1]">
  <tr class="[2]">
    <td class="px-6 py-4 whitespace-nowrap">Alice Smith</td>
    <td class="px-6 py-4 whitespace-nowrap">Designer</td>
  </tr>
  <tr class="[2]">
    <td class="px-6 py-4 whitespace-nowrap">Bob Johnson</td>
    <td class="px-6 py-4 whitespace-nowrap">Developer</td>
  </tr>
</tbody>

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

Adivide-y-0

Bbg-gray-50

Codd:bg-white

Deven:bg-gray-50

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving dividing lines which breaks the striped look.

Using odd:bg-white which is default and doesn't create stripes.

Removing the dividing lines with 'divide-y-0' and using 'even:bg-gray-50' on rows creates a striped effect with alternating background colors.

5fill in blank

hard

Fill all three blanks to create a table header with sticky position and shadow.

Tailwind

<thead class="bg-gray-50 [1] [2] [3]">
  <tr>
    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ID</th>
    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
  </tr>
</thead>

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

Asticky

Btop-0

Cshadow-md

Dz-10

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting 'top-0' which is needed with 'sticky'.

Using 'z-10' which controls layering but is not required here.

The classes 'sticky' and 'top-0' make the header stick to the top when scrolling, and 'shadow-md' adds a subtle shadow for separation.