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.
HTML Code
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow-2xl rounded-lg p-6 transition ease-in-out duration-300">
<h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-200 mb-4">User Data Table</h2>
<table class="min-w-full bg-white dark:bg-gray-900 rounded-lg shadow-lg">
<thead>
<tr class="w-full bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-sm">
<th class="py-3 px-4 text-left">#</th>
<th class="py-3 px-4 text-left">Avatar</th>
<th class="py-3 px-4 text-left">Name</th>
<th class="py-3 px-4 text-left">Email</th>
<th class="py-3 px-4 text-left">Phone</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">1</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">John Doe</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(123) 456-7890</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">2</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">Jane Smith</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(321) 654-0987</td>
</tr>
<tr class="hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-2 px-4 border-b">3</td>
<td class="py-2 px-4 border-b"><img src="https://picsum.photos/40" alt="Avatar" class="rounded-full"/></td>
<td class="py-2 px-4 border-b">Mike Johnson</td>
<td class="py-2 px-4 border-b">[email protected]</td>
<td class="py-2 px-4 border-b">(456) 789-0123</td>
</tr>
</tbody>
</table>
</div>
</div>Composants associés
Composant Tableaux de données
Un composant de tableau de données réactif dans un design minimaliste et plat, adapté aux sites Web d’entreprise, avec prise en charge du thème sombre.
RétroVintageDataTable
Un composant de table de données réactif de style rétro/vintage utilisant Tailwind CSS avec prise en charge du mode sombre.
Composant Tableaux de données
Un composant de table de données réactif avec une conception Neumorphism, une palette de couleurs triadique et la prise en charge du mode sombre, adapté à un blog ou à un site de contenu.