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

150

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

2 months ago

208
gallary
html , css

Author:
Hacker Development

2 months ago

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

Author:
ORGIN_DREAMS

1 month ago

185
Interactive Pricing Table
This modern pricing component features a visually appealing, responsive layout with smooth hover effects, making it ideal for showcasing different plans and subscription tiers. Design and Features: ✅ Elegant Gradient Backgrounds • Each pricing card has a unique gradient overlay, transitioning from soft gray, blue, or indigo to white, enhancing contrast and visual appeal. • The rounded-2xl design ensures a polished and smooth aesthetic. ✅ Interactive Hover Effects • Cards have a subtle hover shadow enhancement, making them pop on interaction (hover:shadow-[0_0px_25px_0px_rgba(0,0,0,0.2)]). • Slight floating effect (hover:translate-y-[-5px]) gives the illusion of elevation on hover. ✅ Pricing & Plan Details • Each card presents a plan title, a short subtitle, and a bold price display (text-3xl font-extrabold text-indigo-500). • Supports free, subscription-based, and enterprise-tier pricing, ensuring flexibility for different business models. ✅ Call-to-Action Buttons • Each plan features a highly visible CTA button (bg-indigo-700 text-white rounded-md). • The buttons change color on hover (hover:bg-indigo-500) and expand slightly, encouraging user interaction. ✅ Animated Background Icons • A large, transparent icon (text-[500px] text-gray-100) dynamically moves on hover (group-hover:-translate-y-8 group-hover:-translate-x-8), adding depth and a premium feel. This pricing component is perfect for SaaS platforms, digital subscriptions, and service offerings, ensuring a modern, sleek, and engaging user experience. 🚀

Author:
Banshee

5 months ago

924
sidebar
This sidebar implementation includes: 1. Responsive design that works on both desktop and mobile 2. Indigo-800 and Blue-900 color scheme for the background 3. Dark mode support 4. Beautiful animations and effects: 1. Slide-in animation when opening the sidebar 2. Fade-in animation for menu items with staggered delays 3. Hover effects on menu items with underline animation 4. Smooth color transitions 5. SVG icons for menu items 6. User profile section at the bottom of the sidebar 7. Close button for easy dismissal on mobile 8. Main content area with a toggle button for the sidebar 9. Accessibility considerations (proper heading structure, color contrast, focus styles) Key features: - The background uses a gradient from Indigo-800 to Blue-900 - The sidebar has a white background in light mode and dark gray in dark mode - Text colors are adjusted for readability in both light and dark modes - Menu items have hover effects with background color changes and underline animations - Icons change color on hover - The sidebar slides in from the left with a smooth animation - Menu items fade in with a staggered delay for a smooth entrance - Dark mode is automatically applied based on system preferences - The layout is responsive, with the sidebar hiding off-screen on mobile and a toggle button to show/hide it This implementation provides a visually appealing and functional sidebar with various animations and effects, using HTML, Tailwind CSS, and vanilla JavaScript for the interactions.

Author:
nejaa badr

8 months ago

3.3k
vav bar
html , css

Author:
Hacker Development

2 months ago

245
Clean AI Chat UI with Tailwind CSS – ChatGPT-Style Interface
A polished and responsive AI chat interface built using modern Web Components and Tailwind CSS. This UI replicates the smooth, minimal experience of ChatGPT with a clean layout, floating input bar, animated scrollable message feed, and mock AI responses. Ideal for SaaS dashboards, AI assistants, or frontend prototypes. Designed with professional spacing, accessible colors, and reusable components. Key features: Responsive layout with mobile support Floating input bar with auto-expanding textarea Tailwind-powered message bubbles with clear sender roles Modern dark theme with subtle gradients and shadows Easily extendable to real AI APIs (e.g., OpenAI)

Author:
Ayyamperumal S

2 months ago

531
Gallery
Masonry Grid

Author:
Aman kumar

1 year ago

2.5k
Elegant Animated Drawer (Responsive)
A static sidebar when the screen is >=lg. It collapses into a drawer when the screen is <lg. Still requires no JavaScript to function (although this example uses a bit of JS).

Author:
Nick Girga

2 months ago

220
Tailwind Sidebar Layout

Author:
nejaa badr

1 year ago

6.6k
Responsive navbar with dark mode support
Sidebar on small screen devices

Author:
TailwindFlex

2 years ago

17.9k
Hero

Author:
Aman kumar

1 year ago

6.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components