Componente de tablas de datos
Un componente de tablas de datos diseñado en un estilo skeuomórfico, que imita a sus homólogos del mundo real con efectos responsivos y admite temas oscuros. La tabla incluye encabezados, filas con datos y utiliza imágenes de marcador de posición.
Código HTML
<div class="container mx-auto px-4 py-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h2>
<div class="overflow-x-auto shadow-lg rounded-lg">
<table class="min-w-full bg-white dark:bg-gray-800">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">#</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Name</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Email</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Avatar</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">1</td>
<td class="py-2 px-4 border-b dark:border-gray-600">John Doe</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">2</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Jane Smith</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=2" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">3</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Alice Johnson</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">4</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Bob Brown</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=4" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #cbd5e0;
}
}
</style>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 tablas de datos responsivo diseñado en estilo skeuomórfico con soporte para temas oscuros utilizando Tailwind CSS.
Componente de tablas de datos
Un componente de tabla de datos minimalista y receptivo diseñado con Tailwind CSS que admite el modo oscuro.