Componente de la galería de productos - Diseño de materiales
Un componente de la galería de productos inspirado en Material Design con diseño responsivo, efectos de desplazamiento y compatibilidad con temas oscuros. Utiliza Tailwind CSS.
Código HTML
<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
<div class="dark:bg-gray-800 dark:text-white">
<div class="-m-1 flex flex-wrap md:-m-2">
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=1"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=2"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=3"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=4"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=5"
/>
</div>
</div>
<div class="flex w-1/3 flex-wrap">
<div class="w-full p-1 md:p-2">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center shadow-md transition ease-in-out hover:-translate-y-1 hover:scale-105"
src="https://picsum.photos/500/300?random=6"
/>
</div>
</div>
</div>
</div>
</div>Componentes relacionados
Componente de la galería de productos
Un componente de galería de productos responsivo con un diseño esqueuomórfico, combinación de colores monocromática y compatibilidad con temas oscuros, creado con Tailwind CSS. Cuenta con un diseño simple adecuado para blogs y consumo de contenido, imitando elementos del mundo real con sombras y degradados sutiles.
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 simple y receptivo con tonos tierra, optimizado para el modo oscuro y el consumo de contenido. Ideal para blogs o sitios de comercio electrónico que muestran artículos.