Composant de galerie de produits
Un composant de galerie de produits réactif conçu avec un style de neumorphisme et une palette de couleurs triadique, adapté à la présentation de travaux ou de produits, avec prise en charge du thème sombre.
HTML Code
<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>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 de galerie de produits réactif conçu pour le mode sombre, avec des images et des avatars avec Tailwind CSS.
Composant de galerie de produits
Un composant de galerie de produits réactif conçu dans un style brutaliste avec une palette de couleurs pastel adaptée aux médias sociaux. Il présente un contraste élevé, des éléments de design audacieux et est optimisé pour le mode sombre.