Tailwind CSS Image Gallery Components

Components

Tailwind CSS Image Gallery Components - Madhuranjan UI

Explore a range of responsive and modern image gallery components built with Tailwind CSS. Each design offers a unique visual experience to showcase your images effectively.

All our components are fully responsive and perform flawlessly on every device.

All components are fully responsive and adapt to any screen size. While mobile previews may appear condensed, they will display perfectly on actual devices. Test them on Tailwind CSS Play. or resize your browser to see the responsiveness in action.

Simple Image Gallery

A clean and straightforward layout to showcase your images with a minimalist design.

1<div class="container mx-auto px-4 py-8">
2  <!-- Image Gallery Grid -->
3  <div class="columns-1 sm:columns-2 md:columns-3 lg:columns-4 gap-4 space-y-4">
4    <!-- Image 1 -->
5    <div class="relative group overflow-hidden rounded-lg shadow-md hover:shadow-lg transition-shadow">
6      <img 
7        src="https://images.unsplash.com/photo-1682686580391-615bbeacec2d" 
8        alt="Desert landscape" 
9        class="w-full h-auto object-cover transition-transform duration-500 group-hover:scale-105"
10        loading="lazy"

Image Gallery with Hover Text

Enhance user interaction with a hover effect that reveals additional text information over images.

Mountain Vista

Beautiful mountain landscape at sunset

Photo by Peter McBride

New York Skyline

The iconic city that never sleeps

Photo by Sebastian Svenson

King of the Jungle

Majestic lion resting in the wild

Photo by Thomas Lebhart

Tropical Paradise

White sand beach with turquoise water

Photo by Kristaps Ungurs

1 <div class="container mx-auto px-4 py-12">
2 
3   <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
4     <div class="group relative overflow-hidden rounded-xl shadow-lg transition-all duration-300 hover:shadow-xl">
5      <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb" alt="Mountain landscape" class="h-72 w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" />
6      <div class="absolute inset-0 flex flex-col justify-end bg-gradient-to-t from-black/60 via-transparent to-transparent p-5 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
7        <h3 class="mb-1 text-xl font-bold text-white">Mountain Vista</h3>
8        <p class="mb-2 text-sm text-gray-200">Beautiful mountain landscape at sunset</p>
9        <p class="text-xs text-gray-300">Photo by <a href="https://unsplash.com/@peter_mc_greats" class="hover:underline">Peter McBride</a></p>
10      </div>

Mixed Image Gallery

Combine different layouts in one gallery to create a dynamic presentation that suits various content types.

1<div class="container mx-auto px-5 py-2 lg:px-32 lg:pt-24">
2  <div class="-m-1 flex flex-wrap md:-m-2">
3    <!-- Left Column (Half Width) -->
4    <div class="flex w-1/2 flex-wrap">
5      <div class="w-1/2 p-1 md:p-2">
6        <img alt="gallery" class="block h-full w-full rounded-lg object-cover object-center transition-transform duration-300 hover:scale-105" src="https://picsum.photos/600/600?random=1" />
7      </div>
8      <div class="w-1/2 p-1 md:p-2">
9        <img alt="gallery" class="block h-full w-full rounded-lg object-cover object-center transition-transform duration-300 hover:scale-105" src="https://picsum.photos/600/600?random=2" />
10      </div>

Polaroid Gallery

Give your images a nostalgic twist with a Polaroid-inspired layout that adds charm and character.

1<div class="container mx-auto px-4 py-8">
2  <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6">
3
4    <!-- Polaroid 1 -->
5    <div class="bg-white p-4 pb-8 rounded shadow-lg rotate-1 hover:rotate-0 transition-all duration-300">
6      <img
7        src="https://picsum.photos/300?random=1"
8        alt="Random 1"
9        class="w-full aspect-square object-cover border border-gray-100"
10        loading="lazy"

Horizontal Scroll Gallery

Experience smooth horizontal scrolling to display a series of images in an interactive and modern style.

← Scroll horizontally →

1<div class="relative w-full overflow-hidden py-8">
2  <div class="flex snap-x snap-mandatory overflow-x-auto gap-4 px-4 pb-4">
3    <!-- Image 1 -->
4    <div class="flex-none snap-center w-4/5 sm:w-2/5 md:w-1/3 lg:w-1/4">
5      <img
6        src="https://picsum.photos/800/600?random=1"
7        alt="Gallery image 1"
8        class="w-full h-64 sm:h-80 object-cover rounded-xl shadow-lg"
9        loading="lazy"
10      />

Rating About Page