Componenti Tabelle di dati Tabella dei dati sul brutalismo

Tabella dei dati sul brutalismo

Un componente semplice e brutale della tabella dei dati con colori analoghi per siti web aziendali/aziendali. È reattivo e supporta la modalità oscura utilizzando Tailwind CSS.

Anteprima

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

Componenti correlati

Componente Tabelle dati

Un componente reattivo per la tabella dei dati per i siti di documentazione/wiki, con supporto per la modalità oscura, combinazione di colori nei toni della terra e HTML semantico. Progettato per interfacce complesse con più colonne, azioni e impaginazione.

Aperto

Tabella dati lusso/premium per organizzazioni non profit/beneficenza

Un componente di tabella dati elegante e reattivo, progettato con un aspetto lussuoso/premium che utilizza toni blu aziendali, adatto per organizzazioni senza scopo di lucro e di beneficenza. Include il supporto per la modalità oscura e un'interfaccia complessa per la visualizzazione dei dati con le azioni.

Aperto

Componente Tabelle dati

Un componente di tabelle dati progettato con lo stile Brutalismo con colori ad alta saturazione per l'e-commerce, reattivo con supporto per temi scuri.

Aperto