Tables

Lesson 18 Tailwind CSS

Build responsive data tables using Tailwind.

Learning approach

Study the Tailwind classes in the example, run the preview, then modify the classes and observe how the design changes.

Tailwind Example

HTML + Tailwind CSS

<div class="overflow-x-auto p-5">

<table class="w-full text-left text-sm">

<thead class="bg-slate-100">
<tr>
    <th class="p-4">Name</th>
    <th class="p-4">Course</th>
    <th class="p-4">Status</th>
</tr>
</thead>

<tbody>

<tr class="border-b">
    <td class="p-4">Alex</td>
    <td class="p-4">JavaScript</td>
    <td class="p-4 text-emerald-600">Active</td>
</tr>

<tr>
    <td class="p-4">Mary</td>
    <td class="p-4">Python</td>
    <td class="p-4 text-emerald-600">Active</td>
</tr>

</tbody>

</table>

</div>