Default table
| # | Title | Author | Views |
|---|---|---|---|
| 1 | Intro to CSS | Adam | 858 |
| 2 | A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design | Adam | 112 |
| 3 | Intro to JavaScript | Chris | 1,280 |
<!-- default table -->
<table class="w-full">
<thead class="bg-slate-50 dark:bg-slate-800">
<tr class="border-b border-slate-200 dark:border-slate-700">
<th class="px-4 py-3 font-medium">#</th>
<th class="px-4 py-3 font-medium">Title</th>
<th class="px-4 py-3 font-medium">Author</th>
<th class="px-4 py-3 font-medium">Views</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-200 dark:border-slate-700">
<td class="px-4 py-3 font-medium">1</td>
<td class="px-4 py-3 font-medium">Intro to CSS</td>
<td class="px-4 py-3 font-medium">Adam</td>
<td class="px-4 py-3 font-medium">858</td>
</tr>
<tr class="border-b border-slate-200 dark:border-slate-700">
<td class="px-4 py-3 font-medium">2</td>
<td class="px-4 py-3 font-medium">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
<td class="px-4 py-3 font-medium">Adam</td>
<td class="px-4 py-3 font-medium">112</td>
</tr>
<tr class="border-b border-slate-200 dark:border-slate-700">
<td class="px-4 py-3 font-medium">3</td>
<td class="px-4 py-3 font-medium">Intro to JavaScript</td>
<td class="px-4 py-3 font-medium">Chris</td>
<td class="px-4 py-3 font-medium">1,280</td>
</tr>
</tbody>
</table>
Table Bordered
| # | Title | Author | Views |
|---|---|---|---|
| 1 | Intro to CSS | Adam | 858 |
| 2 | A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design | Adam | 112 |
| 3 | Intro to JavaScript | Chris | 1,280 |
<!-- table bordered -->
<table class="w-full">
<thead class="bg-slate-50 dark:bg-slate-800">
<tr>
<th class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">#</th>
<th class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">Title</th>
<th class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">Author</th>
<th class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">Views</th>
</tr>
</thead>
<tbody>
<tr>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">1</td>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">Intro to CSS</td>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">Adam</td>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">858</td>
</tr>
<tr>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">2</td>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">Adam</td>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">112</td>
</tr>
<tr>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">3</td>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">Intro to JavaScript</td>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">Chris</td>
<td class="border border-slate-200 px-4 py-3 dark:border-slate-700 font-medium">1,280</td>
</tr>
</tbody>
</table>
Table Stripped & Background Hover
| # | Title | Author | Views |
|---|---|---|---|
| 1 | Intro to CSS | Adam | 858 |
| 2 | A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design | Adam | 112 |
| 3 | Intro to JavaScript | Chris | 1,280 |
<!-- table stripped -->
<table class="w-full">
<thead class="bg-slate-100 dark:bg-slate-800">
<tr class="border-b border-slate-200 dark:border-slate-700">
<th class="px-4 py-3 font-medium">#</th>
<th class="px-4 py-3 font-medium">Title</th>
<th class="px-4 py-3 font-medium">Author</th>
<th class="px-4 py-3 font-medium">Views</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-700 hover:bg-cyan-50 hover:dark:bg-cyan-900">
<td class="px-4 py-3 font-medium">1</td>
<td class="px-4 py-3 font-medium">Intro to CSS</td>
<td class="px-4 py-3 font-medium">Adam</td>
<td class="px-4 py-3 font-medium">858</td>
</tr>
<tr class="border-b border-slate-200 hover:bg-cyan-50 dark:border-slate-700 hover:dark:bg-cyan-900">
<td class="px-4 py-3 font-medium">2</td>
<td class="px-4 py-3 font-medium">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
<td class="px-4 py-3 font-medium">Adam</td>
<td class="px-4 py-3 font-medium">112</td>
</tr>
<tr class="border-b border-slate-200 dark:border-slate-700 bg-slate-50 dark:bg-slate-700 hover:bg-cyan-50 hover:dark:bg-cyan-900">
<td class="px-4 py-3 font-medium">3</td>
<td class="px-4 py-3 font-medium">Intro to JavaScript</td>
<td class="px-4 py-3 font-medium">Chris</td>
<td class="px-4 py-3 font-medium">1,280</td>
</tr>
</tbody>
</table>
Table with Colors
| # | Title | Author | Views |
|---|---|---|---|
| 1 | Intro to CSS | Adam | 858 |
| 2 | A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design | Adam | 112 |
| 3 | Intro to JavaScript | Chris | 1,280 |
| 4 | Intro to React | Chris | 1,280 |
| 5 | Intro to Vue js | Chris | 1,280 |
<!-- table colors -->
<table class="w-full">
<thead class="bg-cyan-500 text-white dark:bg-cyan-900">
<tr class="border-b border-slate-200 dark:border-slate-700">
<th class="px-4 py-3 font-medium">#</th>
<th class="px-4 py-3 font-medium">Title</th>
<th class="px-4 py-3 font-medium">Author</th>
<th class="px-4 py-3 font-medium">Views</th>
</tr>
</thead>
<tbody>
<tr class="border-b border-slate-200 dark:border-slate-700 bg-red-50 dark:bg-red-900 hover:bg-cyan-50">
<td class="px-4 py-3 font-medium">1</td>
<td class="px-4 py-3 font-medium">Intro to CSS</td>
<td class="px-4 py-3 font-medium">Adam</td>
<td class="px-4 py-3 font-medium">858</td>
</tr>
<tr class="border-b border-slate-200 dark:border-slate-700 bg-yellow-50 dark:bg-yellow-900 hover:bg-cyan-50">
<td class="px-4 py-3 font-medium">2</td>
<td class="px-4 py-3 font-medium">A Long and Winding Tour of the History of UI Frameworks and Tools and the Impact on Design</td>
<td class="px-4 py-3 font-medium">Adam</td>
<td class="px-4 py-3 font-medium">112</td>
</tr>
<tr class="border-b border-slate-200 dark:border-slate-700 bg-green-50 dark:bg-green-900 hover:bg-cyan-50">
<td class="px-4 py-3 font-medium">3</td>
<td class="px-4 py-3 font-medium">Intro to JavaScript</td>
<td class="px-4 py-3 font-medium">Chris</td>
<td class="px-4 py-3 font-medium">1,280</td>
</tr>
<tr class="border-b border-slate-200 dark:border-slate-700 bg-indigo-50 dark:bg-indigo-900 hover:bg-cyan-50">
<td class="px-4 py-3 font-medium">4</td>
<td class="px-4 py-3 font-medium">Intro to React</td>
<td class="px-4 py-3 font-medium">Chris</td>
<td class="px-4 py-3 font-medium">1,280</td>
</tr>
<tr class="border-b border-slate-200 dark:border-slate-700 bg-blue-50 dark:bg-blue-900 hover:bg-cyan-50">
<td class="px-4 py-3 font-medium">5</td>
<td class="px-4 py-3 font-medium">Intro to Vue js</td>
<td class="px-4 py-3 font-medium">Chris</td>
<td class="px-4 py-3 font-medium">1,280</td>
</tr>
</tbody>
</table>