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.
HTML Code
<div class="overflow-x-auto bg-white dark:bg-gray-800 p-4 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold text-center mb-4 text-gray-800 dark:text-gray-200">Retro Data Table</h2>
<table class="min-w-full border-collapse border border-gray-300 dark:border-gray-600">
<thead class="bg-gray-200 dark:bg-gray-700">
<tr>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">#</th>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Name</th>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Email</th>
<th class="border border-gray-300 dark:border-gray-600 p-2 text-left text-gray-800 dark:text-gray-200">Avatar</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800">
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">1</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">John Doe</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar"></td>
</tr>
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">2</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">Jane Smith</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar"></td>
</tr>
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">3</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">Alice Johnson</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/women/2.jpg" alt="Avatar"></td>
</tr>
<tr class="border-b border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700">
<td class="border border-gray-300 dark:border-gray-600 p-2">4</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">Bob Brown</td>
<td class="border border-gray-300 dark:border-gray-600 p-2">[email protected]</td>
<td class="border border-gray-300 dark:border-gray-600 p-2"><img class="rounded-full w-10 h-10" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar"></td>
</tr>
</tbody>
</table>
</div>Composants associés
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.
Composant Tableaux de données
Tableau de données réactif pour le tableau de bord avec prise en charge du thème sombre
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é.