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
Composantes interactives
Un composant Web conçu avec des éléments skeuomorphes pour les interfaces de médias sociaux, avec une palette de couleurs complémentaire et la prise en charge du thème sombre.
Composante des composantes interactives
Composant de composants interactifs avec conception 3D, palette de couleurs monochromatique et complexité modérée pour le commerce électronique, avec conception réactive et prise en charge du thème sombre.
Composante des composantes interactives
Un composant interactif pour les médias sociaux conçu avec un mode sombre et une palette de couleurs monochromatiques.