Data Tables Component
A responsive data table component themed in retro/vintage style, designed with Tailwind CSS, supporting dark mode and featuring nostalgic design elements from the 80s/90s.
HTML Code
<div class="overflow-x-auto bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-gray-200">Retro Data Table</h2>
<table class="min-w-full border-collapse border border-gray-300 dark:border-gray-600">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">#</th>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Name</th>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Email</th>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Avatar</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">1</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">John Doe</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
</tr>
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">2</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">Jane Smith</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
</tr>
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">3</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">Alice Johnson</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar"></td>
</tr>
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">4</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">Bob Brown</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
</tr>
</tbody>
</table>
</div>Related Components
Brutalism Data Table
A responsive data table component with Brutalist design, featuring dark mode support and hover effects.
Data Tables Component
Responsive Data Tables Component with Dark Mode Support using Tailwind CSS
Data Tables Component
A Data Tables Component designed with Brutalism style featuring high-saturation colors for e-commerce, responsive with dark theme support.