GALLERY

This tailwind example is contributed by ORGIN_DREAMS, on 21-May-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Masonry, Image grid,popup,dialog

Image gallery Modal

Author ORGIN_DREAMS

Tailwind v3.4 1.9k 4

Fork Fullscreen

<section class="py-20 bg-white">
  <div class="container mx-auto px-6">
    <div class="text-center mb-16">
      <span class="text-rose-600 font-semibold">OUR GALLERY</span>
      <h2 class="text-4xl md:text-5xl font-bold text-gray-900 mt-4">Captured Moments</h2>
      <p class="max-w-2xl mx-auto text-gray-600 mt-6 text-lg">A visual journey through our most memorable events and projects</p>
    </div>

<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
      
      <div class="group relative overflow-hidden rounded-lg aspect-square">
        <img 
          src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
          alt="Concert crowd" 
          class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <div class="translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
            <h3 class="text-white text-xl font-bold">Annual Music Festival</h3>
            <p class="text-white/80 mt-1">June 2023</p>
          </div>
        </div>
      </div>

<div class="group relative overflow-hidden rounded-lg aspect-square">
        <img 
          src="https://images.unsplash.com/photo-1529333166437-7750a6dd5a70?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
          alt="Team building" 
          class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <div class="translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
            <h3 class="text-white text-xl font-bold">Team Retreat</h3>
            <p class="text-white/80 mt-1">May 2023</p>
          </div>
        </div>
      </div>

<div class="group relative overflow-hidden rounded-lg aspect-square">
        <img 
          src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
          alt="Office meeting" 
          class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <div class="translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
            <h3 class="text-white text-xl font-bold">Strategy Workshop</h3>
            <p class="text-white/80 mt-1">April 2023</p>
          </div>
        </div>
      </div>

<div class="group relative overflow-hidden rounded-lg aspect-square">
        <img 
          src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
          alt="Team celebration" 
          class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <div class="translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
            <h3 class="text-white text-xl font-bold">Product Launch</h3>
            <p class="text-white/80 mt-1">March 2023</p>
          </div>
        </div>
      </div>

<div class="group relative overflow-hidden rounded-lg aspect-square">
        <img 
          src="https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
          alt="Conference" 
          class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <div class="translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
            <h3 class="text-white text-xl font-bold">Industry Conference</h3>
            <p class="text-white/80 mt-1">February 2023</p>
          </div>
        </div>
      </div>

<div class="group relative overflow-hidden rounded-lg aspect-square">
        <img 
          src="https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
          alt="Volunteering" 
          class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <div class="translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
            <h3 class="text-white text-xl font-bold">Community Service</h3>
            <p class="text-white/80 mt-1">January 2023</p>
          </div>
        </div>
      </div>

<div class="group relative overflow-hidden rounded-lg aspect-square">
        <img 
          src="https://images.unsplash.com/photo-1542626991-cbc4e32524cc?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
          alt="Award ceremony" 
          class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <div class="translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
            <h3 class="text-white text-xl font-bold">Awards Night</h3>
            <p class="text-white/80 mt-1">December 2022</p>
          </div>
        </div>
      </div>

<div class="group relative overflow-hidden rounded-lg aspect-square">
        <img 
          src="https://images.unsplash.com/photo-1552664730-d307ca884978?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" 
          alt="Office party" 
          class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-500"
        >
        <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex items-end p-6">
          <div class="translate-y-4 group-hover:translate-y-0 transition-transform duration-300">
            <h3 class="text-white text-xl font-bold">Holiday Party</h3>
            <p class="text-white/80 mt-1">November 2022</p>
          </div>
        </div>
      </div>
    </div>

<div class="text-center mt-16">
      <button class="px-8 py-3 bg-rose-600 text-white font-medium rounded-lg hover:bg-rose-700 transition-colors shadow-lg">
        Load More Photos
      </button>
    </div>
  </div>
</section>

Related Examples

Premium High-Performance Web Gaming Hub
Experience the future of browser-based gaming. I’ve developed a premium arcade hub designed for speed, clarity, and zero-latency gameplay. Built with modern web technologies, Ayyamperumal Games brings AAA-inspired visuals and high-octane mechanics directly to your browser—no downloads, no lag, just pure performance. Explore a curated library of titles ranging from minimalist logic puzzles like Sudoku Elite to fast-paced action in Neon Drift. This is where clean code meets high-level entertainment.

Ayyamperumal S

9 months ago

948
Animated modal with Tailwind Css and alpinejs

Michael Andreuzza

2 years ago

3.8k
animated blog cards with Tailwind CSS

Michael Andreuzza

2 years ago

6.3k
image gallery with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

4.8k
Simple Alret Modal
Minimal Modal

_Amar_

4 years ago

12.7k
Login screen
Reward login screen

ehmasuk

1 year ago

971
image gallery
image gallery [lightbox]

Prasertsak ฟาร์มวันหยุด

2 years ago

4.4k
new Save Component tailwindflex
new Save Component tailwindflex

Omer fils ELENGA

4 months ago

358
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Abhiraj

1 year ago

2.8k
Modal multiple window

Maxim

2 years ago

3.1k
Clean Image Grid Gallery
A clean and balanced image gallery arranged in equal-sized columns for a simple, organized presentation.

JUGENDRA GANGWAR

2 months ago

238
File Upload

Rajesh Maheshwari

1 year ago

1.5k