Componente de tablas de datos
Un componente de tabla de datos minimalista y receptivo diseñado con Tailwind CSS que admite el modo oscuro.
Código HTML
<div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg">
<table class="min-w-full border-collapse">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Avatar</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Profile Picture</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900">
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">John Doe</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">Alice Johnson</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
</tbody>
</table>
</div>Componentes relacionados
ArtDecoCryptoDataTable
Un componente de tabla de datos simple y receptivo para aplicaciones de criptomonedas/blockchain, diseñado con patrones geométricos inspirados en el Art Deco y un esquema de color análogo. Incluye soporte para modo oscuro.
Tabla de datos Rainbow Gradient inspirada en papel/impresión
Un componente de tabla de datos simple y receptivo con un diseño inspirado en el papel/impresión y un sutil fondo degradado de arco iris, adecuado para tableros. Incluye soporte para modo oscuro.
Tabla de datos de atención médica
Un componente de tabla de datos minimalista y sensible con tonos azules corporativos, adecuado para aplicaciones sanitarias. Incluye soporte para modo oscuro, búsqueda y paginación. Utiliza HTML semántico para la accesibilidad.