Product Gallery Component
A product gallery component with microinteractions.
HTML Code
<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-12">
<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 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
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 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
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 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
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 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
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 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
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 transform transition duration-500 ease-in-out hover:scale-105">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center"
src="https://picsum.photos/500/300?random=6" />
</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 with a dark UI, sepia/brown color scheme, suitable for business/corporate websites. Includes multiple product cards with images, titles, descriptions, and prices, and supports dark mode.
Product Gallery Component
A responsive product gallery component with a Material Design aesthetic, featuring a grid-based layout and interactive elements suitable for showcasing products or a portfolio. Includes dark mode support and uses an analogous color scheme.