Image Gallery Flex - Tailwind Component
A simple of taildwindcss responsive galleries component created with flex.
gallery
Loading component...
126 lines
<h1 class="text-center font-bold py-10 text-3xl dark:text-white">Image Gallery With Flex</h1>
<!-- Image Gallery Basic 1 -->
<div class="container px-10 py-8 mx-auto items-center">
<h3 class="p-4 text-xl text-semibold">Image Gallery Basic 1</h3>
<div class="flex flex-wrap">
<div class="lg:w-1/3 sm:w-1/2 p-2 ">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100">
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100 ">
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100 ">
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100 ">
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100 ">
</div>
</div>
<div class="lg:w-1/3 sm:w-1/2 p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100 ">
</div>
</div>
</div>
</div>
<!-- Image Gallery Basic 2 -->
<div class="container px-10 py-8 mx-auto items-center">
<h3 class="p-4 text-xl text-semibold">Image Gallery Basic 2</h3>
<div class="flex flex-wrap">
<div class="lg:w-1/4 sm:w-1/2 p-2 ">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100">
</div>
</div>
<div class="lg:w-1/4 sm:w-1/2 p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100 ">
</div>
</div>
<div class="lg:w-1/4 sm:w-1/2 p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100 ">
</div>
</div>
<div class="lg:w-1/4 sm:w-1/2 p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100 ">
</div>
</div>
</div>
</div>
<!-- Image Gallery Mix -->
<div class="container md:px-32 px-10 py-8 mx-auto items-center">
<h3 class="p-4 text-xl text-semibold">Image Gallery Mix</h3>
<div class="flex flex-wrap">
<div class="md:w-full p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100">
</div>
</div>
<div class="md:w-1/2 p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100 ">
</div>
</div>
<div class="md:w-1/2 p-2">
<div class="flex relative">
<img
src="https://images.unsplash.com/photo-1641810780723-8bc471f87245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"
alt="Photo by Claudio Schwarz on Unsplash"
class="inset-0 h-full w-full object-cover object-center rounded-lg opacity-75 hover:opacity-100 ">
</div>
</div>
</div>
</div>