Composant Tableaux de données
Un composant de table de données minimaliste et réactif conçu avec Tailwind CSS qui prend en charge le mode sombre.
HTML Code
<div class="overflow-x-auto bg-white dark:bg-gray-800 shadow-md rounded-lg">
<table class="min-w-full border-collapse">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Name</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Email</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Avatar</th>
<th class="py-3 px-5 text-left text-gray-600 dark:text-gray-300">Profile Picture</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-900">
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">John Doe</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">Jane Smith</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
<tr class="border-b hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">Alice Johnson</td>
<td class="py-3 px-5 text-gray-800 dark:text-gray-200">[email protected]</td>
<td class="py-3 px-5"><img src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar" class="w-10 h-10 rounded-full"></td>
<td class="py-3 px-5"><img src="https://picsum.photos/50/50" alt="Profile" class="rounded"></td>
</tr>
</tbody>
</table>
</div>Composants associés
Composant Tableaux de données
Un composant de tables de données conçu dans un style skeuomorphe, imitant ses homologues du monde réel avec des effets réactifs et prenant en charge les thèmes sombres. Le tableau comprend des en-têtes, des lignes avec des données et utilise des images d’espace réservé.
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.
Composant Tableaux de données
Un composant de table de données réactif sur le thème du style rétro/vintage, conçu avec Tailwind CSS, prenant en charge le mode sombre et présentant des éléments de design nostalgiques des années 80/90.