Tabla de datos de brutalismo
Un componente de tabla de datos simple y brutalista con colores análogos para sitios web comerciales / corporativos. Es responsivo y admite el modo oscuro usando Tailwind CSS.
Código HTML
<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800">
<table class="min-w-full border-collapse border-spacing-0 shadow-xl">
<thead>
<tr class="bg-teal-500 dark:bg-teal-700 text-white">
<th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Name</th>
<th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Title</th>
<th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Status</th>
<th class="border border-gray-700 dark:border-gray-600 p-4 text-left">Role</th>
</tr>
</thead>
<tbody>
<tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
<td class="border border-gray-700 dark:border-gray-600 p-4">John Doe</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Software Engineer</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
</tr>
<tr class="bg-teal-300 dark:bg-teal-500 text-gray-900 dark:text-white">
<td class="border border-gray-700 dark:border-gray-600 p-4">Jane Smith</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">UI/UX Designer</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Active</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Member</td>
</tr>
<tr class="bg-teal-200 dark:bg-teal-600 text-gray-900 dark:text-white">
<td class="border border-gray-700 dark:border-gray-600 p-4">Peter Jones</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Product Manager</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Inactive</td>
<td class="border border-gray-700 dark:border-gray-600 p-4">Admin</td>
</tr>
</tbody>
</table>
</div>
Componentes relacionados
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.
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.
Componente de tablas de datos
Componente de tablas de datos responsivo con soporte de modo oscuro mediante Tailwind CSS