gallary

Forked from> @mostafa-mohamed-elgdawy/gallary

html , css

This tailwind example is contributed by Hacker Development, on 08-May-2025. Component is made with Tailwind CSS v3. 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

516

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

Author:
Hacker Development

5 months ago

562
gallary
html , css

Author:
Hacker Development

5 months ago

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

Author:
ORGIN_DREAMS

5 months ago

856
macOS Style Webpage – macOS Design in the Browser
A simple webpage inspired by the macOS interface. It recreates the clean design, dock, and desktop look of macOS using only HTML, tailwind CSS, and JavaScript. This project focuses on front-end styling and layout to bring the visual feel of macOS to the web — not a full simulation, just the look and vibe.

Author:
Hamza Atig

1 week ago

166
landing page
web Design

Author:
Hacker Development

6 months ago

1k
Gallery
Masonry Grid

Author:
Aman kumar

1 year ago

3k
about video
about kelaplus video

Author:
Omer fils ELENGA

3 months ago

378
Luxurious Grid Gallery

Author:
UI-Templates

3 weeks ago

73
My Personal Landing page
This HTML document showcases Aydin Vesali Moghaddam's personal portfolio, highlighting his journey in web development. The page features a responsive design that adapts to various screen sizes, ensuring a seamless user experience across devices. It includes a personal introduction, a brief overview of Aydin's tech journey, and a contact form for visitors to subscribe to updates. Additionally, the page provides links to Aydin's Discord, website, and Twitter, offering multiple avenues for connecting and staying updated on his projects.

Author:
AyDin VM

1 year ago

5.8k
Hero Beer

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

4.8k
Table Content
Dashboard Table Content, with Sidebar Reusable for any window

Author:
Ameth Galarcio

8 months ago

1.8k
A Fullscreen Hero Section

Author:
Hasan AlDoy (McDoy)

9 months ago

1.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components