Composants du commerce électronique
Un composant de commerce électronique de style brutaliste avec un design audacieux, un contraste élevé et une mise en page réactive avec prise en charge du mode sombre.
HTML Code
<div class="bg-white text-black dark:bg-gray-900 dark:text-white p-6 rounded-lg shadow-lg">
<div class="flex flex-col md:flex-row items-center justify-between space-x-0 md:space-x-4">
<div class="flex-shrink-0">
<img class="w-32 h-32 rounded-lg shadow-md" src="https://picsum.photos/200/200" alt="Product Image">
</div>
<div class="mt-4 md:mt-0 md:flex-grow">
<h2 class="text-2xl font-bold">Brutalism T-Shirt</h2>
<p class="text-lg text-gray-700 dark:text-gray-300">A bold statement piece for your wardrobe. Embrace the raw aesthetic of brutalism with this unique T-Shirt.</p>
<span class="text-xl font-semibold text-red-600 dark:text-red-400">$29.99</span>
</div>
<div class="mt-4 md:mt-0">
<button class="bg-red-600 text-white font-bold py-2 px-4 rounded-full shadow hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 transition">Add to Cart</button>
</div>
</div>
<div class="mt-6 border-t border-gray-300 dark:border-gray-700 pt-4">
<h3 class="text-lg font-bold">Product Review</h3>
<div class="flex items-center mt-2">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User Avatar">
<div class="ml-2">
<span class="font-semibold">John Doe</span>
<p class="text-sm text-gray-600 dark:text-gray-400">“This shirt is awesome! Love the brutalist design.”</p>
</div>
</div>
<div class="mt-2 flex items-center">
<img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="User Avatar">
<div class="ml-2">
<span class="font-semibold">Jane Smith</span>
<p class="text-sm text-gray-600 dark:text-gray-400">“Very comfortable and stylish. Highly recommend!”</p>
</div>
</div>
</div>
</div>Composants associés
Brutalism_Retro_Simple_E-commerce_Agriculture_Product_Card
Une fiche produit simple, de style brutaliste, pour un site Web d’agriculture/élevage en ligne avec une palette de couleurs rétro, avec une image de produit, un titre, un prix et un bouton d’ajout au panier. Conçu avec une prise en charge de la réactivité et du mode sombre.
Composant Composants de commerce électronique
Un composant de commerce électronique réactif conçu pour le mode sombre avec une palette de couleurs triadiques, avec des listes de produits, une icône de panier d’achat et un avatar de l’utilisateur.
Composant Composants de commerce électronique
Une carte d’annonce immobilière simple et réactive avec un design inspiré du papier/de l’impression et une palette de couleurs de terre, y compris la prise en charge du mode sombre.