Fiche produit brutaliste
Un composant simple de carte produit interactive pour le e-commerce, avec un design brutaliste en niveaux de gris. Il comporte une image de produit, un titre, un prix et un bouton « Ajouter au panier ». Le composant est réactif et prend en charge le mode sombre. Des effets de survol sont inclus pour l’interactivité.
HTML Code
<div class="dark:bg-gray-900 bg-gray-100 p-4 font-mono antialiased flex items-center justify-center min-h-screen">
<div class="relative dark:bg-black bg-white border-2 border-black dark:border-white w-full max-w-sm mx-auto shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
<div class="overflow-hidden border-b-2 border-black dark:border-white">
<img src="https://picsum.photos/400/300?random=1" alt="Product Image" class="w-full h-48 object-cover transition-transform duration-300 ease-in-out hover:scale-105">
</div>
<div class="p-4 relative">
<h3 class="text-xl dark:text-white text-black font-bold mb-2 uppercase">Product Title Here</h3>
<p class="text-black dark:text-gray-300 text-sm mb-4">A short and punchy description of the product, highlighting its brutalist appeal.</p>
<div class="flex justify-between items-center mb-4">
<span class="text-2xl dark:text-white text-black font-extrabold">$99.99</span>
<button class="bg-black dark:bg-white text-white dark:text-black uppercase text-sm py-2 px-4 border-2 border-black dark:border-white font-bold hover:bg-gray-800 dark:hover:bg-gray-300 transition-colors duration-200 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff]">Add to Cart</button>
</div>
</div>
<div class="absolute -top-2 -right-2 bg-black dark:bg-white text-white dark:text-black px-2 py-1 text-xs font-bold uppercase border-2 border-black dark:border-white">New</div>
</div>
</div>Composants associés
Composante des composantes interactives
Une fiche produit e-commerce complexe avec des éléments de conception 3D, utilisant une palette de couleurs triadique, conçue pour des expériences d’achat en ligne interactives avec une prise en charge réactive et en mode sombre.
Composante des composantes interactives
Un composant complexe et interactif de style Neumorphisme avec une palette de couleurs vives, conçu pour les sites Web d’alimentation/restaurants. Il comprend des boutons interactifs, des curseurs et des éléments de sélection, avec une prise en charge du mode sombre et une réactivité totale.