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
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.
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é.
Luxury_Premium_Manufacturing_Data_Table
Un composant de table de données complexe et réactif pour une utilisation industrielle/industrielle, doté d’un design luxueux/haut de gamme avec une palette de couleurs noir et blanc et une seule couleur d’accent vive. Comprend la prise en charge du mode sombre et des éléments interactifs.