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.
HTML Code
<div class="container mx-auto my-10 p-5 bg-white bg-opacity-30 backdrop-blur-lg shadow-lg rounded-lg dark:bg-gray-800 dark:bg-opacity-30">
<h2 class="text-2xl font-bold text-gray-800 dark:text-white text-center">Data Tables</h2>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-300 dark:divide-gray-600">
<thead class="bg-gray-50 dark:bg-gray-700">
<tr>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">#</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Avatar</th>
<th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Profile Image</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-gray-600">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">1</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">John Doe</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/200/300" alt="Profile Image"></td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">2</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Jane Smith</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/201/300" alt="Profile Image"></td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-400">3</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">Michael Johnson</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">[email protected]</td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300"><img class="w-20 h-20 rounded-lg" src="https://picsum.photos/202/300" alt="Profile Image"></td>
</tr>
</tbody>
</table>
</div>
</div>
<style>
/* Additional styles for glassmorphism */
body {
background: rgb(239, 246, 255);
background: linear-gradient(90deg, rgba(239, 246, 255, 1) 0%, rgba(255, 255, 255, 0.75) 100%);
}
.bg-white {
background: rgba(255, 255, 255, 0.9) !important;
}
/* Dark mode adjustments */
.dark .bg-white {
background: rgba(31, 41, 55, 0.7) !important;
}
</style>Composants associés
Grille de données rétro
Un composant de table de données réactif avec une esthétique rétro/vintage des années 80/90 utilisant Tailwind CSS. Il présente un design en blocs, des accents de couleurs vibrantes (violet/orange en mode clair, vert/néon en mode sombre) et une police monospace pour une sensation de technologie nostalgique. Le tableau comprend un style d’en-tête et de ligne distinct, des éléments bordés tels que des avatars et des badges de statut, et prend en charge le mode sombre via CSS. Les données d’espace réservé comprennent les avatars des utilisateurs, les coordonnées, les badges de statut, les rôles et les dates d’adhésion. La table est défilante horizontalement sur des écrans plus petits pour une meilleure réactivité.
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
Composant de tables de données réactives avec prise en charge du mode sombre à l’aide de Tailwind CSS