RetroVintageDataTable
Un componente de tabla de datos de estilo retro/vintage receptivo que utiliza Tailwind CSS con soporte para modo oscuro.
Código HTML
<!-- Retro Vintage Data Table Component -->
<div class="overflow-x-auto bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-xl border-4 border-teal-700 dark:border-teal-900 font-sans">
<table class="min-w-full border-collapse border-spacing-0">
<thead>
<tr class="bg-teal-700 dark:bg-teal-900 text-gray-100 text-sm uppercase">
<th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Name</th>
<th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Title</th>
<th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Status</th>
<th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Role</th>
<th scope="col" class="px-4 py-3 text-left tracking-wider border-b-4 border-teal-900 dark:border-teal-700">Image</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-700 divide-y divide-gray-300 dark:divide-gray-600 text-gray-800 dark:text-gray-200 text-sm">
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
<img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar">
Rickard Andersson
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Software Engineer</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Active</span>
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1015/60/40" alt="Random Image">
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
<img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar">
Alice Johnson
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Product Manager</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800 dark:bg-yellow-800 dark:text-yellow-100">Pending</span>
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Admin</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1018/60/40" alt="Random Image">
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
<img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/men/70.jpg" alt="Avatar">
Bob Williams
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">UX Designer</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100">Inactive</span>
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1024/60/40" alt="Random Image">
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600 transition-colors duration-200 ease-in-out">
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600 flex items-center">
<img class="h-8 w-8 rounded-full mr-3 border-2 border-purple-700 dark:border-purple-900" src="https://randomuser.me/api/portraits/women/8.jpg" alt="Avatar">
Jane Smith
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Marketing Specialist</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100">Active</span>
</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">Member</td>
<td class="px-4 py-3 border-b border-gray-300 dark:border-gray-600">
<img class="h-10 w-16 object-cover rounded border-2 border-purple-700 dark:border-purple-900" src="https://picsum.photos/id/1025/60/40" alt="Random Image">
</td>
</tr>
</tbody>
</table>
</div>
Componentes relacionados
Tabla de datos de brutalismo
Un componente de tabla de datos receptivo con diseño brutalista, con soporte para modo oscuro y efectos de desplazamiento.
Componente de tablas de datos
Un componente de tabla de datos responsivo con temática de estilo retro/vintage, diseñado con Tailwind CSS, compatible con el modo oscuro y con elementos de diseño nostálgicos de los años 80/90.