Composant Tableaux de données
Un composant simple de table de données avec des couleurs de terre, des micro-interactions et la prise en charge du mode sombre, adapté aux interfaces de médias sociaux.
HTML Code
<div class="container mx-auto p-4">
<div class="bg-white dark:bg-gray-800 shadow rounded-lg overflow-hidden">
<table class="min-w-full leading-normal">
<thead>
<tr>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
User
</th>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Status
</th>
<th class="px-5 py-3 border-b-2 border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-gray-700 text-left text-xs font-semibold text-gray-600 dark:text-gray-300 uppercase tracking-wider">
Joined
</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/85.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
John Doe
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Active
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Jan 10, 2023
</p>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/women/45.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Jane Smith
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Pending
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Feb 15, 2023
</p>
</td>
</tr>
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition duration-150 ease-in-out">
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<div class="flex items-center">
<div class="flex-shrink-0 w-10 h-10">
<img class="w-full h-full rounded-full"
src="https://randomuser.me/api/portraits/men/60.jpg"
alt="" />
</div>
<div class="ml-3">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Peter Jones
</p>
</div>
</div>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Inactive
</p>
</td>
<td class="px-5 py-5 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 text-sm">
<p class="text-gray-900 dark:text-white whitespace-no-wrap">
Mar 20, 2023
</p>
</td>
</tr>
</tbody>
</table>
</div>
</div>Composants associés
Organic_Nature_Dashboard_Data_Table
Il s’agit d’un composant de tableau de données de complexité modérée, inspiré de la nature et organique, pour les tableaux de bord avec une palette de couleurs vives, avec des lignes fluides, une réactivité et une prise en charge du mode 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é.