Componente Componenti E-commerce
Un componente di e-commerce reattivo con microinterazioni, combinazione di colori analoga e supporto per temi scuri.
Codice HTML
<div class="container mx-auto p-4 dark:bg-gray-800">
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
<!-- Product 1 -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
<img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
<!-- Product 2 (similar structure) -->
<div class="bg-white rounded-lg shadow-md overflow-hidden transform transition duration-500 hover:scale-105 dark:bg-gray-700">
<img src="https://picsum.photos/600/400" alt="Product Image" class="w-full h-64 object-cover">
<div class="p-4">
<h3 class="text-xl font-bold mb-2 text-gray-800 dark:text-white">Product Title</h3>
<p class="text-gray-600 text-sm mb-4 dark:text-gray-300">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-2xl font-bold text-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition duration-300 dark:bg-blue-700 dark:hover:bg-blue-600">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Forum_Community_Component
Un componente di discussione forum/community reattivo e tematico con uno stile di design aziendale/professionale e una combinazione di colori oceano/blu, incluso il supporto per la modalità scura.
Componente Componenti E-commerce
Un componente di e-commerce brutalista per un blog, caratterizzato da una combinazione di colori vivaci e una complessità moderata. Include un design reattivo con supporto per il tema scuro utilizzando Tailwind CSS.
Brutalism_Retro_Simple_E-commerce_Agriculture_Product_Card
Una semplice scheda prodotto in stile brutalista per un sito Web di e-commerce di agricoltura/agricoltura con una combinazione di colori retrò, con un'immagine del prodotto, un titolo, un prezzo e un pulsante di aggiunta al carrello. Progettato con reattività e supporto per la modalità scura.