Componente della galleria dei prodotti
Un componente della galleria di prodotti reattivo progettato con uno stile neumorfismo e una combinazione di colori triadica, adatto per mostrare lavori o prodotti, con supporto per temi scuri.
Codice HTML
<div class="bg-gray-200 dark:bg-gray-800 p-6 rounded-lg shadow-lg"> <h2 class="text-2xl font-semibold text-gray-800 dark:text-gray-100 mb-4">Product Gallery</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1012/300/200" alt="Product 1" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 1</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1013/300/200" alt="Product 2" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 2</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/women/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1014/300/200" alt="Product 3" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 3</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/men/31.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> <div class="bg-white dark:bg-gray-700 shadow-xl rounded-lg p-4 transition-transform transform hover:scale-105"> <img src="https://picsum.photos/id/1015/300/200" alt="Product 4" class="rounded-lg mb-2"> <h3 class="text-lg font-medium text-gray-800 dark:text-gray-200">Product Title 4</h3> <p class="text-gray-600 dark:text-gray-300">Short description of the product.</p> <div class="flex items-center mt-2"> <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="User Avatar" class="rounded-full w-10 h-10 border-2 border-gray-300 dark:border-gray-600"> <span class="ml-2 text-gray-700 dark:text-gray-400">User Name</span> </div> </div> </div></div>Componenti correlati
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti progettato in stile brutalismo con una combinazione di colori pastello adatta ai social media. Presenta un contrasto elevato, elementi di design audaci ed è ottimizzato per la modalità scura.
Componente della galleria dei prodotti
Un semplice componente della galleria di prodotti progettato con elementi 3D per la profondità, utilizzando una combinazione di colori triadica. È reattivo e supporta il tema scuro, adatto per mostrare lavori o prodotti.
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.