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.
Código HTML
<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>Componentes relacionados
Brutalist_ECommerce_Table
Un componente de tabla de datos receptivo de estilo brutalista para comercio electrónico, con alto contraste, un esquema de color complementario (amarillo/morado) y compatibilidad con el modo oscuro. Diseñado para listados de productos o gestión de pedidos.
Componente de tablas de datos
Un componente de tabla de datos simple con colores de tono tierra, microinteracciones y soporte de modo oscuro, adecuado para interfaces de redes sociales.
Componente de tablas de datos
Un componente de tablas de datos responsivo diseñado con el estilo Neumorphism utilizando Tailwind CSS, con soporte para temas oscuros e imágenes de marcador de posición aleatorio.