Product Gallery Component - Material Design
A Material Design inspired Product Gallery component with responsive design, hover effects, and dark theme support. Uses Tailwind CSS.
HTML Code
<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>Related Components
Product Gallery Component
A responsive product gallery with a retro/vintage style, featuring a complementary color scheme and designed for business/corporate websites with dark mode support.
Product Gallery Component
A responsive product gallery component designed for dark mode, featuring images and avatars with Tailwind CSS.
Product Gallery Component
A responsive product gallery component designed in a brutalism style with a pastel color scheme suitable for social media. It features high contrast, bold design elements and is optimized for dark mode.