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.
Código HTML
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 transition ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">User Data Table</h2>
<table class="min-w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<thead>
<tr class="w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">
<th class="py-3 px-4 text-left">#</th>
<th class="py-3 px-4 text-left">Avatar</th>
<th class="py-3 px-4 text-left">Name</th>
<th class="py-3 px-4 text-left">Email</th>
<th class="py-3 px-4 text-left">Phone</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">1</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">John Doe</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(123) 456-7890</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">2</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">Jane Smith</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(321) 654-0987</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">3</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">Mike Johnson</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(456) 789-0123</td>
</tr>
</tbody>
</table>
</div>
</div>Componentes relacionados
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.
Cuadrícula de datos retro
Un componente de tabla de datos responsivo con un estilo retro/vintage de los años 80/90 utilizando Tailwind CSS. Cuenta con un diseño en bloques, acentos de colores vibrantes (morado/naranja en modo claro, verde/neón en modo oscuro) y una fuente monoespaciada para una sensación tecnológica nostálgica. La tabla incluye estilos de encabezado y fila distintos, elementos bordeados como avatares e insignias de estado, y admite el modo oscuro a través de CSS. Los datos de marcador de posición incluyen avatares de usuario, información de contacto, insignias de estado, roles y fechas de unión. La tabla se puede desplazar horizontalmente en pantallas más pequeñas para una mejor capacidad de respuesta.
Tabla de datos artísticos de acuarela
Un componente de tabla de datos receptivo con un estilo de diseño suave, acuarela / artístico y colores dulces como caramelos, adecuado para organizaciones sin fines de lucro / caridad. Incluye compatibilidad con el modo oscuro y muestra una complejidad moderada con un enfoque en el atractivo visual y la legibilidad.