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
Componente de la galería de productos basado en los principios de Material Design, con diseño responsivo y soporte para temas oscuros. Incluye imágenes de marcador de posición.
Componente de la galería de productos
Un componente de galería de productos con microinteracciones.
Componente de la galería de productos
Un componente de galería de productos receptivo diseñado para la interfaz de usuario del modo oscuro, con colores complementarios, adecuado para interfaces de redes sociales.