Composant Tableaux de données
Un composant de tables de données réactif conçu dans le style Skeuomorphic avec prise en charge du thème sombre à l’aide de Tailwind CSS.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-md max-w-3xl mx-auto mt-10">
<h2 class="text-2xl font-bold mb-4 text-gray-800 dark:text-white">User Data Table</h2>
<div class="overflow-x-auto">
<table class="min-w-full bg-white dark:bg-gray-900 shadow-lg rounded-lg">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Avatar</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-4 text-left text-sm font-medium text-gray-600 dark:text-gray-300">Status</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">John Doe</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-red-500 text-white py-1 px-2 rounded-full text-xs">Inactive</span></td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-4"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
<td class="py-3 px-4 text-gray-800 dark:text-gray-200">Bob Johnson</td>
<td class="py-3 px-4 text-gray-600 dark:text-gray-400">[email protected]</td>
<td class="py-3 px-4"><span class="bg-green-500 text-white py-1 px-2 rounded-full text-xs">Active</span></td>
</tr>
</tbody>
</table>
</div>
<div class="mt-4 text-center">
<img class="mx-auto" src="https://picsum.photos/600/200" alt="Random placeholder">
</div>
</div>Composants associés
Tableau de données
Composant de table de données réactif avec le style Material Design, avec prise en charge du mode sombre et du comportement réactif sans JavaScript. Comprend des images de remplacement pour la démonstration.
Composant Tableaux de données
Un composant de tables de données réactif avec un design glassmorphism, avec des éléments translucides ressemblant à du verre givré, des effets de flou et la prise en charge du mode sombre.
Composant Tableaux de données
Un composant de tables de données conçu avec le style Brutalism avec des couleurs à haute saturation pour le commerce électronique, réactif avec la prise en charge du thème sombre.