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
Tableau de données réactif pour le tableau de bord avec prise en charge du thème sombre
Composant Tableaux de données
Un composant de tables de données réactif avec un design glassmorphism, avec des éléments translucides ressemblant à du verre givré, des effets de flou et la prise en charge du mode sombre.
Luxury_Premium_Manufacturing_Data_Table
Un composant de table de données complexe et réactif pour une utilisation industrielle/industrielle, doté d’un design luxueux/haut de gamme avec une palette de couleurs noir et blanc et une seule couleur d’accent vive. Comprend la prise en charge du mode sombre et des éléments interactifs.