Brutalist_ECommerce_Table
Un composant de table de données réactif de style brutaliste pour le commerce électronique, doté d’un contraste élevé, d’un schéma de couleurs complémentaires (jaune/violet) et d’une prise en charge du mode sombre. Conçu pour les listes de produits ou la gestion des commandes.
HTML Code
<div class="font-sans p-4 sm:p-6 md:p-8 bg-yellow-100 dark:bg-purple-900 min-h-screen text-purple-900 dark:text-yellow-100 transition-colors duration-300">
<h2 class="text-2xl sm:text-3xl md:text-4xl font-extrabold mb-6 sm:mb-8 text-black dark:text-yellow-300 uppercase tracking-widest border-b-4 border-l-4 border-black dark:border-yellow-300 p-2 transform -skew-x-6 inline-block">
Product Listings
</h2>
<div class="overflow-x-auto border-4 border-black dark:border-yellow-300 bg-purple-200 dark:bg-purple-950 shadow-brutalist">
<table class="w-full text-left border-collapse">
<thead class="border-b-4 border-black dark:border-yellow-300 bg-purple-500 dark:bg-purple-800 text-yellow-100 dark:text-yellow-100">
<tr>
<th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
ID
</th>
<th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
Product
</th>
<th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider hidden sm:table-cell border-r-4 border-black dark:border-yellow-300">
Category
</th>
<th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider border-r-4 border-black dark:border-yellow-300">
Price
</th>
<th class="p-3 sm:p-5 text-sm sm:text-base font-bold uppercase tracking-wider text-center">
Actions
</th>
</tr>
</thead>
<tbody>
<!-- Product 1 -->
<tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#001</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
<img src="https://picsum.photos/60/60?random=1" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
<span class="font-semibold text-sm sm:text-base">Crude Widget X</span>
</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Electronics</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$19.99</td>
<td class="p-3 sm:p-5 text-center">
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
<button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
</td>
</tr>
<!-- Product 2 -->
<tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#002</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
<img src="https://picsum.photos/60/60?random=2" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
<span class="font-semibold text-sm sm:text-base">Bold Apparatus MKII</span>
</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Tools</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$45.00</td>
<td class="p-3 sm:p-5 text-center">
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
<button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
</td>
</tr>
<!-- Product 3 -->
<tr class="border-b-2 border-black dark:border-yellow-300 even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#003</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
<img src="https://picsum.photos/60/60?random=3" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
<span class="font-semibold text-sm sm:text-base">Raw Material A</span>
</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Material</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$7.50</td>
<td class="p-3 sm:p-5 text-center">
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
<button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
</td>
</tr>
<!-- Product 4 -->
<tr class="even:bg-purple-100 dark:even:bg-purple-800 odd:bg-purple-200 dark:odd:bg-purple-900">
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-mono text-xs sm:text-sm">#004</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 flex items-center">
<img src="https://picsum.photos/60/60?random=4" alt="Product Image" class="w-12 h-12 object-cover mr-3 border-2 border-purple-900 dark:border-yellow-100 shadow-sm">
<span class="font-semibold text-sm sm:text-base">Unrefined Gadget Z</span>
</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 hidden sm:table-cell text-xs sm:text-sm">Components</td>
<td class="p-3 sm:p-5 border-r-2 border-black dark:border-yellow-300 font-bold text-yellow-800 dark:text-yellow-300 text-sm sm:text-base">$12.25</td>
<td class="p-3 sm:p-5 text-center">
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase mr-1 sm:mr-2 border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">Edit</button>
<button class="bg-red-600 text-yellow-100 px-3 py-1 text-xs sm:px-4 sm:py-2 sm:text-sm font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-red-800">Del</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-8 flex justify-between items-center flex-wrap gap-4">
<p class="text-sm sm:text-base font-bold text-black dark:text-yellow-300 tracking-wide">
Showing 1 to 4 of 12 items
</p>
<div class="flex space-x-2">
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">
Prev
</button>
<button class="bg-black text-yellow-100 dark:bg-yellow-300 dark:text-purple-900 px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base font-bold uppercase border-2 border-black dark:border-yellow-300 transform hover:scale-105 transition-transform duration-150 active:bg-yellow-500 dark:active:bg-purple-500">
Next
</button>
</div>
</div>
</div>
<style>
/* Brutalist Shadow for the table container */
.shadow-brutalist {
box-shadow: 10px 10px 0px 0px rgba(0, 0, 0, 1);
}
.dark .shadow-brutalist {
box-shadow: 10px 10px 0px 0px var(--tw-color-yellow-300);
}
</style>Composants associés
Composant Tableaux de données
Glassmorphism Data Tables Composant aux couleurs vives pour le portefeuille, réactif avec prise en charge du mode sombre. Pas besoin de JavaScript, seulement du HTML avec Tailwind CSS.
Grille de données rétro
Un composant de table de données réactif avec une esthétique rétro/vintage des années 80/90 utilisant Tailwind CSS. Il présente un design en blocs, des accents de couleurs vibrantes (violet/orange en mode clair, vert/néon en mode sombre) et une police monospace pour une sensation de technologie nostalgique. Le tableau comprend un style d’en-tête et de ligne distinct, des éléments bordés tels que des avatars et des badges de statut, et prend en charge le mode sombre via CSS. Les données d’espace réservé comprennent les avatars des utilisateurs, les coordonnées, les badges de statut, les rôles et les dates d’adhésion. La table est défilante horizontalement sur des écrans plus petits pour une meilleure réactivité.