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

547

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

8 months ago

977
gallary
html , css

Author:
Hacker Development

8 months ago

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

Author:
ORGIN_DREAMS

8 months ago

1.1k
Reusable Skill Showcase Section With Pure Tailwind CSS
A fully responsive and modular "Skills & Tools" section, perfect for any developer portfolio. Built with static HTML and Tailwind CSS, this component can be easily integrated into any project and made dynamic using any frontend framework (Vue, React, Svelte, Angular) or vanilla JavaScript. Customize it to highlight your unique tech stack and create engaging portfolio pages.

Author:
Abdul Baset Bappy

9 months ago

1.8k
Animated Drawer
Collapsible sidebar navigation that allows users to access additional menu options. It is designed for efficient space utilization and can be easily expanded and collapsed.

Author:
Eamon Carter

2 years ago

27.7k
Moving Background Animation

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

1 year ago

3.2k
landing page

Author:
Akram Khan

7 months ago

713
OmerLinkSound
OmerLinkSound

Author:
Omer fils ELENGA

2 weeks ago

22
sidebar dash
sidebar dash

Author:
Omer fils ELENGA

2 weeks ago

52
animated blog cards with Tailwind CSS

Author:
Michael Andreuzza

1 year ago

5.3k
EduConnect
EduConnect

Author:
Tanvir Hasan Bappy (Tanvir)

6 months ago

373
hero template

Author:
Raul antonio de la cruz hernandez

2 weeks ago

23

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components