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
Tableau de données des médias sociaux Monochromatique 3D Simple
Un composant de table de données de conception 3D simple et monochrome pour les interfaces de médias sociaux avec prise en charge du thème sombre.
Composant Tableaux de données
Un composant de tables de données réactif conçu dans le style Skeuomorphic avec prise en charge du thème sombre à l’aide de Tailwind CSS.
Composant Tableaux de données
Un composant de tables de données réactif conçu avec le style Neumorphism à l’aide de Tailwind CSS, avec la prise en charge des thèmes sombres et des images d’espace réservé aléatoires.