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 per l'e-commerce
Componente contenitore per l'e-commerce Glassmorphism con combinazione di colori triadica e layout complesso, incluso il supporto della modalità scura
Contenitore per e-commerce di Material Design
Un componente contenitore di e-commerce reattivo con una griglia di prodotti, un riepilogo del carrello della spesa e il supporto per il tema scuro, progettato utilizzando i principi di Material Design e una combinazione di colori dei toni della Terra. Presenta più elementi interattivi, tra cui schede prodotto con immagini, titoli, prezzi e pulsanti "Aggiungi al carrello", nonché un riepilogo del carrello appiccicoso che si aggiorna con gli articoli aggiunti. Il layout si adatta alle diverse dimensioni dello schermo e tutti gli elementi hanno stili di modalità oscura definiti con i prefissi Tailwind CSS dark:.
Contenitore di social media
Un componente contenitore reattivo con colori vivaci, microinterazioni coinvolgenti e supporto per temi scuri, adatto per le interfacce dei social media. Le caratteristiche includono sottili effetti di passaggio del mouse e un layout pulito.