Composant Tableaux de données
Tableau de données réactif pour le tableau de bord avec prise en charge du thème sombre
HTML Code
<div class="container mx-auto p-4 dark:bg-gray-900 dark:text-gray-200">
<h2 class="text-2xl font-bold mb-4 dark:text-white">Dashboard Data</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Name</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Email</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Role</th>
<th class="text-left py-3 px-4 uppercase font-semibold text-sm dark:text-gray-300">Status</th>
</tr>
</thead>
<tbody class="text-gray-700 dark:text-gray-400">
<tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="text-left py-3 px-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
<span>John Doe</span>
</td>
<td class="text-left py-3 px-4">[email protected]</td>
<td class="text-left py-3 px-4">Admin</td>
<td class="text-left py-3 px-4"><span class="px-2 py-1 bg-green-200 text-green-800 text-xs font-semibold rounded-full dark:bg-green-700 dark:text-green-200">Active</span></td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="text-left py-3 px-4 flex items-center">
<img src="https://randomuser.me/api/portraits/women/1.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
<span>Jane Smith</span>
</td>
<td class="text-left py-3 px-4">[email protected]</td>
<td class="text-left py-3 px-4">Editor</td>
<td class="text-left py-3 px-4"><span class="px-2 py-1 bg-yellow-200 text-yellow-800 text-xs font-semibold rounded-full dark:bg-yellow-600 dark:text-yellow-100">Pending</span></td>
</tr>
<tr class="border-b border-gray-200 dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600">
<td class="text-left py-3 px-4 flex items-center">
<img src="https://randomuser.me/api/portraits/men/2.jpg" alt="avatar" class="w-8 h-8 rounded-full mr-2">
<span>Peter Jones</span>
</td>
<td class="text-left py-3 px-4">[email protected]</td>
<td class="text-left py-3 px-4">Viewer</td>
<td class="text-left py-3 px-4"><span class="px-2 py-1 bg-gray-200 text-gray-800 text-xs font-semibold rounded-full dark:bg-gray-600 dark:text-gray-100">Inactive</span></td>
</tr>
</tbody>
</table>
</div>
</div>Composants associés
Composant Tableaux de données
Un composant simple de table de données avec des couleurs de terre, des micro-interactions et la prise en charge du mode sombre, adapté aux interfaces de médias sociaux.
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 table de données réactif au design brutaliste, avec prise en charge du mode sombre et des effets de survol.