Composant Tableaux de données
Un composant de tables de données conçu dans un style skeuomorphe, imitant ses homologues du monde réel avec des effets réactifs et prenant en charge les thèmes sombres. Le tableau comprend des en-têtes, des lignes avec des données et utilise des images d’espace réservé.
HTML Code
<div class="container mx-auto px-4 py-8">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-100">Data Tables</h2>
<div class="overflow-x-auto shadow-lg rounded-lg">
<table class="min-w-full bg-white dark:bg-gray-800">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">#</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Name</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Email</th>
<th class="py-2 px-4 text-left text-gray-600 dark:text-gray-200">Avatar</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">1</td>
<td class="py-2 px-4 border-b dark:border-gray-600">John Doe</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=1" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">2</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Jane Smith</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=2" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">3</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Alice Johnson</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=3" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="py-2 px-4 border-b dark:border-gray-600">4</td>
<td class="py-2 px-4 border-b dark:border-gray-600">Bob Brown</td>
<td class="py-2 px-4 border-b dark:border-gray-600">[email protected]</td>
<td class="py-2 px-4 border-b dark:border-gray-600">
<img src="https://i.pravatar.cc/150?img=4" alt="Avatar" class="rounded-full w-10 h-10" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
/* Dark Mode Styles */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a202c;
color: #cbd5e0;
}
}
</style>Composants associés
Composant Tableaux de données
Un composant de tables de données réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, avec la prise en charge des thèmes sombres et des images d’espace réservé aléatoires.
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.