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-neutral-50 dark:bg-neutral-800">
    <tr class="border-b border-neutral-200 dark:border-neutral-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-neutral-200 dark:border-neutral-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-neutral-200 dark:border-neutral-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-neutral-200 dark:border-neutral-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-neutral-50 dark:bg-neutral-800">
    <tr>
      <th class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">#</th>
      <th class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">Title</th>
      <th class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">Author</th>
      <th class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">Views</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">1</td>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">Intro to CSS</td>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">Adam</td>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">858</td>
    </tr>
    <tr>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">2</td>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-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-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">Adam</td>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">112</td>
    </tr>
    <tr>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">3</td>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">Intro to JavaScript</td>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-700 font-medium">Chris</td>
      <td class="border border-neutral-200 px-4 py-3 dark:border-neutral-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-neutral-100 dark:bg-neutral-800">
    <tr class="border-b border-neutral-200 dark:border-neutral-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-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-700 hover:bg-orange-50 hover:dark:bg-orange-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-neutral-200 hover:bg-orange-50 dark:border-neutral-700 hover:dark:bg-orange-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-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-700 hover:bg-orange-50 hover:dark:bg-orange-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-orange-500 text-white dark:bg-orange-900">
    <tr class="border-b border-neutral-200 dark:border-neutral-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-neutral-200 dark:border-neutral-700 bg-red-50 dark:bg-red-900 hover:bg-orange-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-neutral-200 dark:border-neutral-700 bg-yellow-50 dark:bg-yellow-900 hover:bg-orange-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-neutral-200 dark:border-neutral-700 bg-green-50 dark:bg-green-900 hover:bg-orange-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-neutral-200 dark:border-neutral-700 bg-indigo-50 dark:bg-indigo-900 hover:bg-orange-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-neutral-200 dark:border-neutral-700 bg-blue-50 dark:bg-blue-900 hover:bg-orange-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>