Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti che utilizza Tailwind CSS con uno stile di design neumorfico, una combinazione di colori complementari e un layout complesso adatto per i siti Web aziendali. Include il supporto per la modalità oscura e utilizza immagini da picsum.photos.
Codice HTML
<div class="container mx-auto p-10 bg-gray-200 dark:bg-gray-800">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10">
<!-- Product Card 1 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product1/400/300" alt="Product Image 1" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 1</h3>
<p class="text-gray-600 dark:text-gray-300 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-blue-600 dark:text-blue-400">$99.99</span>
<button class="bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 2 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product2/400/300" alt="Product Image 2" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 2</h3>
<p class="text-gray-600 dark:text-gray-300 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-600 dark:text-green-400">$149.99</span>
<button class="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 3 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-inner-neumorphic-dark">
<img src="https://picsum.photos/seed/product3/400/300" alt="Product Image 3" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 3</h3>
<p class="text-gray-600 dark:text-gray-300 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-red-600 dark:text-red-400">$199.99</span>
<button class="bg-red-500 hover:bg-red-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 4 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product4/400/300" alt="Product Image 4" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 4</h3>
<p class="text-gray-600 dark:text-gray-300 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-purple-600 dark:text-purple-400">$249.99</span>
<button class="bg-purple-500 hover:bg-purple-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 5 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product5/400/300" alt="Product Image 5" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 5</h3>
<p class="text-gray-600 dark:text-gray-300 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-yellow-600 dark:text-yellow-400">$299.99</span>
<button class="bg-yellow-500 hover:bg-yellow-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
<!-- Product Card 6 -->
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-xl shadow-neumorphic-light dark:shadow-neumorphic-dark">
<img src="https://picsum.photos/seed/product6/400/300" alt="Product Image 6" class="rounded-lg mb-4 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark">
<h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Product Title 6</h3>
<p class="text-gray-600 dark:text-gray-300 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-teal-600 dark:text-teal-400">$349.99</span>
<button class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded-lg shadow-neumorphic-light dark:shadow-neumorphic-dark">Add to Cart</button>
</div>
</div>
</div>
</div>
<style>
/* Custom Neumorphic Shadows */
.shadow-neumorphic-light {
box-shadow: 7px 7px 15px #a7a7a7, -7px -7px 15px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 7px 7px 15px #454545, -7px -7px 15px #b3b3b3;
}
.shadow-inner-neumorphic-light {
box-shadow: inset 5px 5px 10px #a7a7a7, inset -5px -5px 10px #ffffff;
}
.dark .shadow-inner-neumorphic-dark {
box-shadow: inset 5px 5px 10px #454545, inset -5px -5px 10px #b3b3b3;
}
</style>
Componenti correlati
Componente della galleria dei prodotti
Un componente della galleria di prodotti con un design brutalista, una combinazione di colori in scala di grigi e una complessità moderata. È progettato per uno scopo di dashboard ed è reattivo con supporto per il tema scuro.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato per l'interfaccia utente in modalità scura, con colori complementari, adatto per le interfacce di rete dei social media.
Componente della galleria dei prodotti
Componente della galleria dei prodotti reattivo con supporto per il tema scuro, stile Material Design, combinazione di colori dei toni della terra, complessità semplice, per scopi di e-commerce.