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
Tableau de données sur le brutalisme
Un composant de tableau de données simple et brutaliste avec des couleurs analogues pour les sites Web d’entreprise. Il est réactif et prend en charge le mode sombre à l’aide de Tailwind CSS.
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.
Tableau de données sur les soins de santé
Un composant de table de données réactif et minimaliste avec des tons bleus d’entreprise, adapté aux applications de santé. Inclut la prise en charge du mode sombre, la recherche et la pagination. Utilise le HTML sémantique pour l’accessibilité.