Componentes Tablas de datos Tabla de datos de brutalismo

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.

Vista previa

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 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.

Abrir

Componente de tablas de datos

Un componente de tabla de datos simple con colores de tono tierra, microinteracciones y soporte de modo oscuro, adecuado para interfaces de redes sociales.

Abrir

Componente de tablas de datos

Un componente de tablas de datos con capacidad de respuesta con un diseño de cristal, con elementos translúcidos similares al vidrio esmerilado, efectos de desenfoque y compatibilidad con el modo oscuro.

Abrir