Gallery Component
Responsive Gallery Component with 3D Design, Analogous Color Scheme, and Dark Mode Support for Social Media interfaces.
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">
<img
alt="gallery"
class="block h-full w-full rounded-lg object-cover object-center transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=1"
style="transform: translateZ(10px);"
/>
</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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=2"
style="transform: translateZ(10px);"
/>
</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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=3"
style="transform: translateZ(10px);"
/>
</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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=4"
style="transform: translateZ(10px);"
/>
</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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=5"
style="transform: translateZ(10px);"
/>
</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 transform transition duration-500 hover:scale-105 shadow-lg dark:shadow-xl"
src="https://picsum.photos/500/300?random=6"
style="transform: translateZ(10px);"
/>
</div>
</div>
</div>
</div>Related Components
Gallery Component
A simple, responsive image gallery component designed for business/corporate websites, featuring a triadic color scheme inspired by Material Design principles. It includes a dark theme for user preference and uses a grid-based layout.
Gallery Component
A responsive gallery component designed in Material Design with an analogous color scheme for a dashboard purpose.