LuxeMonochromatiqueProductGallery
Un composant de galerie de produits simple et élégant avec une palette de couleurs monochromatiques, conçu pour les plateformes musicales/audio. Dispose d’une réactivité totale et d’une prise en charge du mode sombre.
HTML Code
<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>Composants associés
Composant de galerie de produits
Un composant de galerie de produits réactif avec un design skeuomorphe, une palette de couleurs monochromatiques et une prise en charge du thème sombre, construit avec Tailwind CSS. Il présente une mise en page simple adaptée aux blogs et à la consommation de contenu, imitant les éléments du monde réel avec des ombres et des dégradés subtils.
Composant de galerie de produits
Un composant simple de galerie de produits conçu avec des éléments 3D pour plus de profondeur, à l’aide d’une palette de couleurs triadique. Il est réactif et prend en charge le thème sombre, adapté à la présentation de travaux ou de produits.
Composant de galerie de produits
Un composant de galerie de produits réactif conçu pour le mode sombre, avec des images et des avatars avec Tailwind CSS.