Componente contenitore
Componente contenitore reattivo con supporto della modalità oscura per l'e-commerce
Codice HTML
<div class="container mx-auto p-4 bg-gray-900 text-gray-100">
<div class="dark:bg-gray-800 rounded-lg p-6">
<h2 class="text-2xl font-bold mb-4 dark:text-gray-200">Product Listing</h2>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Product Card 1 -->
<div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product1/400/300" alt="Product Image">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 1</h3>
<p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-green-500">$19.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product2/400/300" alt="Product Image">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 2</h3>
<p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-green-500">$29.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-gray-800 dark:bg-gray-700 rounded-lg shadow-md overflow-hidden">
<img class="w-full h-48 object-cover" src="https://picsum.photos/seed/product3/400/300" alt="Product Image">
<div class="p-4">
<h3 class="text-xl font-semibold mb-2 dark:text-gray-300">Product Title 3</h3>
<p class="text-gray-400 dark:text-gray-400 text-sm mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<div class="flex items-center justify-between">
<span class="text-lg font-bold text-green-500">$39.99</span>
<button class="bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">Add to Cart</button>
</div>
</div>
</div>
</div>
</div>
</div>Componenti correlati
Componente contenitore 3D
Un componente contenitore reattivo per dashboard con una combinazione di colori vivaci ed elementi di progettazione 3D, che supporta la modalità oscura.
Contenitore aziendale in scala di grigi 3D
Componente contenitore in scala di grigi 3D per siti Web aziendali/aziendali
Componente contenitore
Un componente contenitore reattivo con microinterazioni che presenta animazioni accattivanti che reagiscono alle azioni dell'utente, supporta la modalità oscura e utilizza Tailwind CSS.