Componente de la galería de productos
Un componente de galería de productos receptivo diseñado con estilo de neumorfismo y un esquema de color triádico, adecuado para exhibir trabajos o productos, con soporte para temas oscuros.
Código 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>Componentes relacionados
Componente de la galería de productos
Un componente de galería de productos receptivo diseñado con los principios de Material Design, con colores en tonos tierra, adecuado para tableros y compatible con el modo oscuro.
Componente de la galería de productos
Un componente de galería de productos receptivo diseñado en un estilo brutalista con una combinación de colores pastel adecuada para las redes sociales. Cuenta con alto contraste, elementos de diseño audaces y está optimizado para el modo oscuro.
Componente de la galería de productos
Un componente de galería de productos con un diseño brutalista, una combinación de colores en escala de grises y una complejidad moderada. Está diseñado para un propósito de tablero y es receptivo con soporte para temas oscuros.