Componente Schede prodotto con interfaccia utente in modalità scura
Componente Schede prodotto con interfaccia utente in modalità scura ed effetti reattivi con Tailwind CSS.
Codice HTML
<div class="bg-gray-900 text-white py-8">
<div class="container mx-auto px-4">
<h2 class="text-3xl font-bold text-center mb-8">Our Products</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Product Name 1</h3>
<p class="text-gray-400 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 justify-between">
<span class="text-lg font-bold">$19.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Product Name 2</h3>
<p class="text-gray-400 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 justify-between">
<span class="text-lg font-bold">$29.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
<div class="bg-gray-800 rounded-lg shadow-lg overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<div class="p-6">
<h3 class="text-xl font-bold mb-2">Product Name 3</h3>
<p class="text-gray-400 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 justify-between">
<span class="text-lg font-bold">$39.99</span>
<button class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition duration-300">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Schede prodotto Componente 52
Un componente della scheda prodotto reattivo che utilizza lo stile di progettazione Glassmorphism con supporto per il tema scuro e Tailwind CSS.
Componente Schede prodotto
Un componente della scheda prodotto reattivo con design 3D, combinazione di colori analoga e supporto per la modalità scura, progettato per le interfacce dei social media.
Componente Schede prodotto
Schede prodotto responsive con effetto vetro smerigliato Glassmorphism con colori pastello, con supporto alla modalità scura. Adatto per le interfacce dei social media.