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.
HTML Code
<div class="bg-gray-100 dark:bg-gray-800 p-6 rounded-lg shadow-lg">
<h2 class="text-2xl font-bold mb-4 text-center text-gray-800 dark:text-gray-200">Product Gallery</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=1" alt="Product 1">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 1</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 1.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=2" alt="Product 2">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 2</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 2.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=3" alt="Product 3">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 3</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 3.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=4" alt="Product 4">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 4</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 4.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=5" alt="Product 5">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 5</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 5.</p>
</div>
</div>
<div class="rounded-lg overflow-hidden shadow-md transform transition-transform duration-300 hover:-translate-y-1">
<img class="w-full h-48 object-cover" src="https://picsum.photos/300/200?random=6" alt="Product 6">
<div class="p-4 bg-white dark:bg-gray-700">
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200">Product 6</h3>
<p class="text-gray-600 dark:text-gray-400">Description of product 6.</p>
</div>
</div>
</div>
</div>Composants associés
Composant de galerie de produits
Un composant de galerie de produits réactif conçu selon les principes de Material Design, avec des couleurs de terre, adapté aux tableaux de bord et prenant en charge le mode sombre.
Composant de galerie de produits
Composant de galerie de produits réactif avec prise en charge du mode sombre
Composant de galerie de produits
Un composant de galerie de produits complexe et réactif avec une esthétique de conception 3D et une palette de couleurs sépia/marron, adapté aux applications technologiques/SaaS. Comprend plusieurs éléments interactifs et la prise en charge du mode sombre.