LussoMonocromaticoProdottoGalleria
Un componente semplice ed elegante per la galleria dei prodotti con una combinazione di colori monocromatici, progettato per piattaforme musicali/audio. Offre piena reattività e supporto per la modalità oscura.
Codice HTML
<div class="bg-gray-100 py-12 dark:bg-gray-900 transition-colors duration-300">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h2 class="text-3xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-4xl text-center mb-12 font-serif">
Our Exquisite Collection
</h2>
<div class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
<!-- Product Card 1 -->
<a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
<img src="https://picsum.photos/id/1047/500/500" alt="Luxury Headphones" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
</div>
<div class="p-4">
<h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Elegance Pro Headphones</h3>
<p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Immersive sound, unparalleled comfort.</p>
<p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$499.00</p>
</div>
</a>
<!-- Product Card 2 -->
<a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
<img src="https://picsum.photos/id/160/500/500" alt="Studio Microphone" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
</div>
<div class="p-4">
<h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Vocalist Studio Mic</h3>
<p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Capture clarity with precision.</p>
<p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$349.00</p>
</div>
</a>
<!-- Product Card 3 -->
<a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
<img src="https://picsum.photos/id/161/500/500" alt="Portable Speaker" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
</div>
<div class="p-4">
<h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">AuraFlow Portable Speaker</h3>
<p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Sound that moves with you.</p>
<p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$189.00</p>
</div>
</a>
<!-- Product Card 4 -->
<a href="#" class="group block dark:bg-gray-800 bg-white rounded-lg shadow-lg overflow-hidden transform hover:scale-105 transition-transform duration-300">
<div class="w-full aspect-w-1 aspect-h-1 bg-gray-200 overflow-hidden xl:aspect-w-7 xl:aspect-h-8">
<img src="https://picsum.photos/id/1054/500/500" alt="Vinyl Turntable" class="w-full h-full object-center object-cover group-hover:opacity-75 transition-opacity duration-300">
</div>
<div class="p-4">
<h3 class="mt-4 text-lg font-medium text-gray-900 dark:text-gray-100 font-serif">Harmonix Vinyl Player</h3>
<p class="mt-1 text-sm text-gray-700 dark:text-gray-300">Rediscover the warmth of sound.</p>
<p class="mt-3 text-lg font-bold text-gray-900 dark:text-white">$799.00</p>
</div>
</a>
</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 componente reattivo della galleria di prodotti progettato per la modalità scura, con immagini e avatar con Tailwind CSS.
Componente della galleria dei prodotti
Un componente reattivo della galleria di prodotti con lo stile di design Glassmorphism, con elementi traslucidi simili al vetro smerigliato con effetti di sfocatura e supporto per temi scuri. Mostra le immagini dei prodotti e gli avatar degli utenti.