gallary

html , css

This tailwind example is contributed by Hacker Development, on 08-May-2025. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Masonry, Image grid,drawer,Front page

Image gallery Sidebar Landing Page

Author Hacker Development

Tailwind v3.4 1.7k 5

Fork Fullscreen

<section class="bg-white">
 <div class="w-full mx-auto max-w-xl flex flex-col lg:h-svh justify-center py-24 lg:py-96 relative p-8">
  <div class="prose text-gray-500 prose-sm prose-headings:font-normal prose-headings:text-xl">
   <div>
    <h1>Image gallery!</h1>
    <p class="text-balance">
     Click on the image to view it in full screen and click outside the
     image or press ESC to close it.
    </p>
   </div>
  </div>
  <div class="mt-6 border-t pt-12">
   
   <div x-data="{ currentImage: null }" x-init="() => {
        window.addEventListener('keydown', (event) => {
            if (event.key === 'Escape') {
                currentImage = null;
            }
        });
    }">
    <div class="grid grid-cols-3 gap-4">
     <div x-on:click="currentImage = 'https://i.pinimg.com/564x/59/41/a0/5941a02c048f6226031a0487451c2651.jpg'" class="cursor-pointer"> <img src="https://i.pinimg.com/564x/59/41/a0/5941a02c048f6226031a0487451c2651.jpg" alt="Image 1" class="w-full h-auto aspect-[3/4] object-cover"> </div>
     <div x-on:click="currentImage = 'https://i.pinimg.com/736x/70/25/f6/7025f63ebdd1caa11b47889c4c4d8fcd.jpg'" class="cursor-pointer"> <img src="https://i.pinimg.com/736x/70/25/f6/7025f63ebdd1caa11b47889c4c4d8fcd.jpg" alt="Image 2" class="w-full h-auto aspect-[3/4] object-cover"> </div>
     <div x-on:click="currentImage = 'https://i.pinimg.com/564x/4e/a7/ff/4ea7ff230ad9f3bc1c30b1b6cbaccad3.jpg'" class="cursor-pointer"> <img src="https://i.pinimg.com/564x/4e/a7/ff/4ea7ff230ad9f3bc1c30b1b6cbaccad3.jpg" alt="Image 3" class="w-full h-auto aspect-[3/4] object-cover"> </div> 
    </div> 
    <div x-show="currentImage" class="fixed inset-0 flex items-center justify-center bg-gray-200 bg-opacity-80 transition-opacity duration-300" role="dialog" aria-modal="true" aria-labelledby="modal-title" style="display: none;">
     <div @click.away="currentImage = null" class="max-w-full max-h-full overflow-auto py-12" tabindex="-1" aria-labelledby="modal-title" aria-describedby="modal-description">
      <div class="prose text-gray-500 mx-auto prose-sm prose-headings:font-normal prose-headings:text-xl">
       <div class="text-center max-w-sm mx-auto">
        <h1>The modal</h1>
        <p class="text-balance">
         To close the modal, click outside the modal, press ESC, or
         click the close button.
        </p>
       </div>
      </div> <button @click="currentImage = null" class="rounded-full bg-orange-600 px-8 py-2 h-12 text-sm font-semibold flex items-center
              text-white hover:bg-orange-500 focus:outline-none focus:ring-2 focus:ring-orange-500 justify-center mx-auto w-auto
              focus:ring-offset-2">Close</button> <img :src="currentImage" alt="Full Size Image" class="max-w-full max-h-full mx-auto mt-12">
     </div>
    </div>
   </div> 
   
   <div class="pointer-events-none fixed inset-x-0 bottom-0 sm:flex sm:justify-center p-2">
    <div class="pointer-events-auto flex w-full max-w-md divide-x divide-neutral-200 rounded-lg bg-white shadow-xl border">
     <div class="flex w-0 flex-1 items-center p-4">
      <div class="w-full">
       <p class="text-sm font-medium text-neutral-900">Tutorial</p>
       <p class="mt-1 text-sm text-neutral-500">
        How to create a image gallery with Tailwind CSS and Alpinejs
       </p>
       <p class="mt-2 text-xs text-orange-500 underline"> <a href="https://lexingtonthemes.com">
         by © Lexington Themes!</a> </p>
      </div>
     </div>
     <div class="flex">
      <div class="flex flex-col divide-y divide-neutral-200">
       <div class="flex h-0 flex-1"> <a href="https://lexingtonthemes.com/tutorials/how-to-create-a-image-gallery-with-tailwind-css-and-alpinejs" type="button" class="flex w-full items-center justify-center rounded-none rounded-tr-lg border border-transparent px-4 py-3 text-sm font-medium text-orange-600 hover:text-orange-500 focus:z-10 focus:outline-none focus:ring-2 focus:ring-orange-500">Tutorial</a> </div>
       <div class="flex h-0 flex-1"> <a href="https://github.com/Lexington-Themes/lexington-tutorials/blob/main/src/pages/image-gallery/index.astro" class="flex w-full items-center justify-center rounded-none rounded-br-lg border border-transparent px-4 py-3 text-sm font-medium text-neutral-700 hover:text-neutral-500 focus:outline-none focus:ring-2 focus:ring-orange-500">Get the code</a> </div>
      </div>
     </div>
    </div>
   </div> 
  </div>
 </div>
</section>

Related Examples

side bar
html css

Hacker Development

1 year ago

1.7k
gallary
html , css

Hacker Development

1 year ago

1.7k
ArtoGallery
Explore a curated selection of contemporary and classic artwork, connecting collectors and creators in an inspiring online space.

ORGIN_DREAMS

1 year ago

2.3k
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

10 months ago

1.1k
Reader AI – Your AI-Powered Knowledge & Thinking System
Reader AI helps you read, think, and remember better. Upload books, highlight insights, chat with AI, and build a personal knowledge system that evolves with you.

Ayyamperumal S

7 months ago

555
Creative Agency Navbar with Fullscreen Mobile Menu & Animated CTA
A bold, editorial-style navigation bar designed for creative agencies, design studios, architecture firms, and portfolio websites. Built with pure HTML and Tailwind CSS, it features a minimalist branding system, fullscreen mobile navigation, animated call-to-action button, responsive layout, and modern typography inspired by premium digital agencies.

JUGENDRA GANGWAR

4 months ago

382
image gallery
image gallery [lightbox]

Anonymous

3 years ago

20.9k
Features Component

KULDEEP

1 year ago

1.5k
Landing page
g2.5, neomorphism

Akram Khan

1 year ago

1.7k
sidebar

Abhishek Kumar

1 year ago

1.5k
Video Player
Youtube Video Player

KULDEEP

1 year ago

1.2k
Moving Background Animation

$$@(\/)(\/)¥$ $@(\/)(\/)¥

1 year ago

4.4k