Componentes Tablas de datos Componente de tabla de datos

Componente de tabla de datos

Tabla de datos responsiva con modo oscuro

Vista previa

Código HTML

<div class="container mx-auto p-4">
  <div class="border rounded-lg overflow-hidden">
    <table class="min-w-full bg-white dark:bg-gray-800">
      <thead>
        <tr>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Title</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Author</th>
          <th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Date</th>
        </tr>
      </thead>
      <tbody>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 1</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">John Doe</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-27</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 2</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Jane Smith</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-26</td>
        </tr>
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 3</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Peter Jones</td>
          <td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-25</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Componentes relacionados

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.

Abrir

Tabla de datos de atención médica

Un componente de tabla de datos minimalista y sensible con tonos azules corporativos, adecuado para aplicaciones sanitarias. Incluye soporte para modo oscuro, búsqueda y paginación. Utiliza HTML semántico para la accesibilidad.

Abrir

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.

Abrir