Componentes Tablas de datos Tabla de datos de brutalismo

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.

Vista previa

Código HTML

<div class="overflow-x-auto bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white">
  <table class="min-w-full table-auto">
    <thead>
      <tr>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Name</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Title</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Status</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Role</th>
        <th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
          John Doe
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Software Engineer</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-green-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Active</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
          Jane Smith
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">UI Designer</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-yellow-500 text-black text-xs px-2 rounded-full uppercase font-semibold">Pending</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Admin</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
      <tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
        <td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
          <img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
          Peter Jones
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Data Analyst</td>
         <td class="px-4 py-2 border-b border-black dark:border-white">
          <span class="inline-block bg-red-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Inactive</span>
        </td>
        <td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
        <td class="px-4 py-2 border-b border-black dark:border-white">
          <button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Componentes relacionados

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.

Abrir

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.

Abrir

RetroVintageDataTable

Un componente de tabla de datos de estilo retro/vintage receptivo que utiliza Tailwind CSS con soporte para modo oscuro.

Abrir