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.
Volet interactif sur les médias sociaux
Un composant complexe de médias sociaux avec une palette de couleurs forêt/vert avec des effets de néon/lueur, adapté aux flux interactifs avec plusieurs éléments. Comprend la conception réactive et la prise en charge du mode sombre.
Composante des composantes interactives
Un composant interactif 3D présentant des cartes avec des effets de profondeur, un design réactif et une prise en charge du thème sombre.