Composants Tableaux de données Tableau de données sur le brutalisme

Tableau de données sur le brutalisme

Un composant de tableau de données simple et brutaliste avec des couleurs analogues pour les sites Web d’entreprise. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.

Aperçu

HTML Code

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

Composants associés

Composant Tableaux de données

Un composant de table de données réactif pour la documentation/les sites wiki, avec prise en charge du mode sombre, schéma de couleurs de terre et HTML sémantique. Conçu pour les interfaces complexes avec plusieurs colonnes, actions et paginations.

Ouvrir

Composant Tableaux de données

Un composant de table de données réactif sur le thème du style rétro/vintage, conçu avec Tailwind CSS, prenant en charge le mode sombre et présentant des éléments de design nostalgiques des années 80/90.

Ouvrir

Composant Tableaux de données

Glassmorphism Data Tables Composant aux couleurs vives pour le portefeuille, réactif avec prise en charge du mode sombre. Pas besoin de JavaScript, seulement du HTML avec Tailwind CSS.

Ouvrir