Composant de tableau de données
Table de données réactive avec mode sombre
HTML Code
<div class="container mx-auto p-4">
<div class="border rounded-lg overflow-hidden">
<table class="min-w-full bg-white dark:bg-gray-800">
<thead>
<tr>
<th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Title</th>
<th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Author</th>
<th class="px-4 py-2 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-sm leading-4 font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">Date</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 1</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">John Doe</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-27</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 2</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Jane Smith</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-26</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-900">
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Blog Post Title 3</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">Peter Jones</td>
<td class="px-4 py-2 border-b border-gray-200 dark:border-gray-700 text-sm leading-5 text-gray-900 dark:text-gray-300">2023-10-25</td>
</tr>
</tbody>
</table>
</div>
</div>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é.
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.