Tabla de datos Modo oscuro
Componente de tabla de datos responsivo con modo oscuro
Código HTML
<div class="overflow-x-auto bg-gray-900 text-pastel-light"
>
<table class="min-w-full table-auto">
<thead>
<tr class="bg-gray-800">
<th class="px-4 py-2 text-left text-pastel-lighter">Name</th>
<th class="px-4 py-2 text-left text-pastel-lighter">Title</th>
<th class="px-4 py-2 text-left text-pastel-lighter">Status</th>
<th class="px-4 py-2 text-left text-pastel-lighter">Role</th>
<th class="px-4 py-2"></th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
John Doe
</td>
<td class="px-4 py-2">Software Engineer</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-green-600 text-white rounded-full text-xs">Active</span>
</td>
<td class="px-4 py-2">Member</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
Jane Smith
</td>
<td class="px-4 py-2">UI/UX Designer</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-yellow-600 text-white rounded-full text-xs">Pending</span>
</td>
<td class="px-4 py-2">Admin</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
Robert Johnson
</td>
<td class="px-4 py-2">Project Manager</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-red-600 text-white rounded-full text-xs">Inactive</span>
</td>
<td class="px-4 py-2">Member</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
Emily Davis
</td>
<td class="px-4 py-2">Data Analyst</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-green-600 text-white rounded-full text-xs">Active</span>
</td>
<td class="px-4 py-2">Observer</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>Componentes relacionados
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.
Componente de tablas de datos
Un componente de tablas de datos diseñado con estilo brutalismo con colores de alta saturación para comercio electrónico, responsivo con soporte para temas oscuros.
Organic_Nature_Dashboard_Data_Table
Un componente de tabla de datos de complejidad moderada, orgánico/inspirado en la naturaleza para paneles con una combinación de colores vibrantes, con líneas fluidas, capacidad de respuesta y compatibilidad con el modo oscuro.