Componente de tablas de datos
Un componente de tablas de datos responsivo diseñado en estilo skeuomórfico con soporte para temas oscuros utilizando Tailwind CSS.
Código HTML
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">User Data Table</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Avatar</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">John Doe</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">Bob Johnson</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 text-center">
<img class="mx-auto" src="https://picsum.photos/600/200" alt="Random placeholder">
</div>
</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 simple con colores de tono tierra, microinteracciones y soporte de modo oscuro, adecuado para interfaces de redes sociales.
Tabla de datos
Un componente de tabla de datos interactivo con estilo Material Design, que ofrece compatibilidad con el modo oscuro y el comportamiento interactivo sin JavaScript. Incluye imágenes de marcador de posición para la demostración.