Componente e-commerce
Un componente e-commerce reattivo con colori Glassmorphism e Pastel, adatto per le interfacce dei social media, con supporto per temi scuri.
Codice HTML
<div class="flex flex-col items-center justify-center p-5 bg-gray-200 dark:bg-gray-800 rounded-lg shadow-lg backdrop-blur-lg bg-opacity-30">
<h2 class="text-2xl font-bold text-gray-800 dark:text-gray-200 mb-3">Featured Products</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
<div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<img src="https://picsum.photos/200/300" alt="Product 1" class="mb-3 rounded-md shadow-sm">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1 goes here.</p>
<span class="font-bold text-xl text-gray-800 dark:text-gray-200">$19.99</span>
<button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<img src="https://picsum.photos/200/301" alt="Product 2" class="mb-3 rounded-md shadow-sm">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2 goes here.</p>
<span class="font-bold text-xl text-gray-800 dark:text-gray-200">$29.99</span>
<button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
</div>
<div class="flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<img src="https://picsum.photos/200/302" alt="Product 3" class="mb-3 rounded-md shadow-sm">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3 goes here.</p>
<span class="font-bold text-xl text-gray-800 dark:text-gray-200">$39.99</span>
<button class="mt-2 px-4 py-2 bg-pink-400 dark:bg-pink-600 text-white rounded-lg hover:bg-pink-500 dark:hover:bg-pink-700">Add to Cart</button>
</div>
</div>
<div class="mt-5 flex flex-col items-center bg-white dark:bg-gray-900 rounded-lg shadow-md backdrop-blur-lg p-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">User Reviews</h3>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/men/10.jpg" alt="User 1" class="w-10 h-10 rounded-full mr-2">
<div class="text-left">
<p class="text-gray-800 dark:text-gray-200 font-bold">John Doe</p>
<p class="text-gray-600 dark:text-gray-400">Great product! Highly recommend.</p>
</div>
</div>
<div class="flex items-center mt-2">
<img src="https://randomuser.me/api/portraits/women/10.jpg" alt="User 2" class="w-10 h-10 rounded-full mr-2">
<div class="text-left">
<p class="text-gray-800 dark:text-gray-200 font-bold">Jane Smith</p>
<p class="text-gray-600 dark:text-gray-400">Loved it! Will buy again.</p>
</div>
</div>
</div>
</div>Componenti correlati
Componenti per l'e-commerce
Un componente di e-commerce di complessità moderata con un design in modalità scura che utilizza i colori della terra per una vetrina del portfolio.
griglia di prodotto retro-monocromatica
Un semplice componente reattivo della griglia dei prodotti per l'e-commerce retrò/vintage con una tavolozza viola monocromatica con supporto per il tema scuro. Il design evoca la nostalgia degli anni '80/'90 con un layout essenziale ed elementi minimali, perfetti per le esperienze di shopping online.
Carta e-commerce per i social media
Componente di e-commerce con focus sui social media, stile Glassmorphism, combinazione di colori monocromatica, layout complesso, reattivo e supporto per temi scuri.