Mode sombre de la table de données
Composant de table de données réactive avec mode sombre
HTML Code
<div class="overflow-x-auto bg-gray-900 text-pastel-light"
>
<table class="min-w-full table-auto">
<thead>
<tr class="bg-gray-800">
<th class="px-4 py-2 text-left text-pastel-lighter">Name</th>
<th class="px-4 py-2 text-left text-pastel-lighter">Title</th>
<th class="px-4 py-2 text-left text-pastel-lighter">Status</th>
<th class="px-4 py-2 text-left text-pastel-lighter">Role</th>
<th class="px-4 py-2"></th>
</tr>
</thead>
<tbody>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
John Doe
</td>
<td class="px-4 py-2">Software Engineer</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-green-600 text-white rounded-full text-xs">Active</span>
</td>
<td class="px-4 py-2">Member</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
Jane Smith
</td>
<td class="px-4 py-2">UI/UX Designer</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-yellow-600 text-white rounded-full text-xs">Pending</span>
</td>
<td class="px-4 py-2">Admin</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/men/76.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
Robert Johnson
</td>
<td class="px-4 py-2">Project Manager</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-red-600 text-white rounded-full text-xs">Inactive</span>
</td>
<td class="px-4 py-2">Member</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
<tr class="border-b border-gray-700 hover:bg-gray-700">
<td class="px-4 py-2 flex items-center">
<img src="https://randomuser.me/api/portraits/women/12.jpg" alt="Avatar" class="h-8 w-8 rounded-full mr-2">
Emily Davis
</td>
<td class="px-4 py-2">Data Analyst</td>
<td class="px-4 py-2">
<span class="px-2 py-1 bg-green-600 text-white rounded-full text-xs">Active</span>
</td>
<td class="px-4 py-2">Observer</td>
<td class="px-4 py-2 text-right">
<button class="bg-pastel-medium hover:bg-pastel-dark text-white py-1 px-3 rounded text-xs">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>Composants associés
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.
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.