Tableau de données sur le brutalisme
Un composant de table de données réactif au design brutaliste, avec prise en charge du mode sombre et des effets de survol.
HTML Code
<div class="overflow-x-auto bg-white dark:bg-black text-black dark:text-white border-4 border-black dark:border-white">
<table class="min-w-full table-auto">
<thead>
<tr>
<th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Name</th>
<th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Title</th>
<th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Status</th>
<th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Role</th>
<th class="px-4 py-2 border-b-4 border-black dark:border-white text-left text-xs font-bold uppercase">Action</th>
</tr>
</thead>
<tbody>
<tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
<td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
<img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar">
John Doe
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">Software Engineer</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<span class="inline-block bg-green-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Active</span>
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
</td>
</tr>
<tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
<td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
<img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar">
Jane Smith
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">UI Designer</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<span class="inline-block bg-yellow-500 text-black text-xs px-2 rounded-full uppercase font-semibold">Pending</span>
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">Admin</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
</td>
</tr>
<tr class="hover:bg-gray-200 dark:hover:bg-gray-700">
<td class="px-4 py-2 border-b border-black dark:border-white flex items-center">
<img class="h-10 w-10 rounded-full mr-2 object-cover" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar">
Peter Jones
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">Data Analyst</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<span class="inline-block bg-red-500 text-white text-xs px-2 rounded-full uppercase font-semibold">Inactive</span>
</td>
<td class="px-4 py-2 border-b border-black dark:border-white">Member</td>
<td class="px-4 py-2 border-b border-black dark:border-white">
<button class="bg-black dark:bg-white text-white dark:text-black px-4 py-2 text-xs font-bold uppercase border-2 border-black dark:border-white hover:bg-white dark:hover:bg-black hover:text-black dark:hover:text-white">Edit</button>
</td>
</tr>
</tbody>
</table>
</div>Composants associés
Skeuomorphic_Earth_Tone_Data_Table
Un tableau de données simple et réactif avec un style de conception skeuomorphe et une palette de couleurs terre, adapté aux sites Web d’entreprise. Inclut la prise en charge du mode sombre.
Job_Application_Data_Table
Un composant de tableau de données réactif et interactif pour les candidatures, conçu avec un style typographique suisse/international épuré et minimaliste et une palette de couleurs sourdes. Comprend le filtrage, le tri, la pagination et la prise en charge du mode sombre.
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.