Composant Cartes de produit
Composant de carte de produit avec style brutalisme, schéma de couleurs monochromatique, niveau de complexité complexe à des fins de commerce électronique.
HTML Code
<div class="dark:bg-stone-900 bg-stone-100 p-6">
<div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<!-- Product Card 1 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 1</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$49.99</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$59.99</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 2</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$75.00</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$90.00</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="dark:bg-stone-800 bg-white border-4 dark:border-stone-700 border-stone-300 dark:text-stone-200 text-stone-800 flex flex-col">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="w-full h-48 object-cover border-b-4 dark:border-stone-700 border-stone-300">
<div class="p-6 flex-grow flex flex-col justify-between tracking-wide">
<div>
<h3 class="text-2xl font-bold mb-2 uppercase">Product Title 3</h3>
<p class="text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<div class="flex items-center mb-4">
<span class="text-xl font-bold mr-2">$120.00</span>
<span class="text-sm line-through dark:text-stone-400 text-stone-500">$150.00</span>
</div>
</div>
<div class="mt-4 dark:border-stone-700 border-stone-300 border-t pt-4 grid grid-cols-2 gap-4 text-center">
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Add to Cart</button>
<button class="dark:bg-stone-700 bg-stone-300 dark:hover:bg-stone-600 hover:bg-stone-400 text-stone-900 dark:text-stone-100 font-bold py-2 px-4 border-4 dark:border-stone-600 border-stone-400 uppercase">Wishlist</button>
</div>
</div>
</div>
</div>
</div>Composants associés
Composant Cartes de produit
Un composant de carte produit réactif avec une conception 3D, une palette de couleurs analogues et une prise en charge du mode sombre, conçu pour les interfaces de médias sociaux.
Composant Cartes de produit
Un composant de cartes produit réactif conçu avec des éléments 3D et une palette de couleurs vives, intégrant un thème sombre pour la consommation de blog et de contenu. Il présente une complexité moyenne avec des éléments interactifs pour l’engagement de l’utilisateur.
Composant Cartes de produit
Un composant de carte produit réactif avec des micro-interactions dans des tons Terre, fournissant une prise en charge du thème sombre pour la présentation du portefeuille.