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.
Codice HTML
<div class="bg-gray-800 text-white p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-semibold mb-4">Featured Products</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1" />
<div class="p-4">
<h3 class="text-xl font-medium mb-2">Product Title 1</h3>
<p class="text-gray-300 mb-4">Brief description of the product.</p>
<span class="text-yellow-500 font-bold">$29.99</span>
<button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
</div>
</div>
<div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2" />
<div class="p-4">
<h3 class="text-xl font-medium mb-2">Product Title 2</h3>
<p class="text-gray-300 mb-4">Brief description of the product.</p>
<span class="text-yellow-500 font-bold">$49.99</span>
<button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
</div>
</div>
<div class="bg-gray-700 hover:bg-gray-600 transition rounded-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3" />
<div class="p-4">
<h3 class="text-xl font-medium mb-2">Product Title 3</h3>
<p class="text-gray-300 mb-4">Brief description of the product.</p>
<span class="text-yellow-500 font-bold">$19.99</span>
<button class="mt-4 w-full py-2 bg-yellow-600 hover:bg-yellow-500 rounded transition">Add to Cart</button>
</div>
</div>
</div>
</div>
Componenti correlati
Componente retrò per l'e-commerce
Un complesso componente di e-commerce progettato con uno stile retrò/vintage, caratterizzato da una combinazione di colori triadica e un design reattivo, adatto per siti Web aziendali/aziendali con supporto per la modalità scura.
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.
Componente Componenti E-commerce
Un componente di e-commerce reattivo con microinterazioni, combinazione di colori analoga e supporto per temi scuri.