Luxurious Grid Gallery

This tailwind example is contributed by UI-Templates, on 13-Oct-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Masonry, Image grid

Image gallery Grid

Author UI-Templates

Tailwind v3.4 743 1

Fork Fullscreen

<h2 class="text-3xl font-bold mb-6 text-center">Custom Grid Gallery</h2>

<div class="sm:col-span-4 relative overflow-hidden rounded-lg shadow-lg cursor-pointer">
        <img src="https://images.unsplash.com/photo-1549294413-26f195200c16?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1080"
             class="w-full h-64 sm:h-full object-cover transition-transform duration-300 hover:scale-105" alt="Wide image">
      </div>

<div class="sm:col-span-2 sm:row-span-2 relative overflow-hidden rounded-lg shadow-lg cursor-pointer">
        <img src="https://images.unsplash.com/photo-1489686995744-f47e995ffe61?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1080"
             class="w-full h-64 sm:h-full object-cover transition-transform duration-300 hover:scale-105" alt="Vertical image">
      </div>

<div class="sm:col-span-2 relative overflow-hidden rounded-lg shadow-lg cursor-pointer">
        <img src="https://images.unsplash.com/photo-1625513123245-fcb02d69ad12?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1080"
             class="w-full h-64 sm:h-full object-cover transition-transform duration-300 hover:scale-105" alt="Square image">
      </div>

<div class="sm:col-span-2 relative overflow-hidden rounded-lg shadow-lg cursor-pointer">
        <img src="https://images.unsplash.com/photo-1630587148265-761cbd139043?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1080"
             class="w-full h-64 sm:h-full object-cover transition-transform duration-300 hover:scale-105" alt="Square image">
      </div>

<div class="sm:col-span-2 relative overflow-hidden rounded-lg shadow-lg cursor-pointer">
        <img src="https://images.unsplash.com/photo-1520473378652-85d9c4aee6cf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1080"
             class="w-full h-64 sm:h-full object-cover transition-transform duration-300 hover:scale-105" alt="Square image">
      </div>

<div class="sm:col-span-2 relative overflow-hidden rounded-lg shadow-lg cursor-pointer">
        <img src="https://images.unsplash.com/photo-1618215650148-e8e61eae521c?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&w=1080"
             class="w-full h-64 sm:h-full object-cover transition-transform duration-300 hover:scale-105" alt="Square image">
      </div>

</div>

</div>
  
<a href="https://discord.gg/95CveWrbK8"
   target="_blank"
   rel="noopener"
   class="absolute bottom-4 right-4 flex items-center gap-2 text-white px-4 py-2 rounded-full shadow-lg hover:bg-indigo-500 transition-all duration-300 z-50 backdrop-blur-md">
  
  <span class="text-sm font-medium">Made by Chandrika</span>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 245 240" class="w-5 h-5 fill-white">
    <path d="M104.4 104.9c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1.1-6.1-4.5-11.1-10.2-11.1zm36.2 0c-5.7 0-10.2 5-10.2 11.1s4.6 11.1 10.2 11.1c5.7 0 10.2-5 10.2-11.1s-4.5-11.1-10.2-11.1z"/>
    <path d="M189.5 20h-134C34.3 20 20 34.3 20 52.5v135c0 18.2 14.3 32.5 32.5 32.5h113.4l-5.3-18.3 12.8 11.8 12.1 11.1 21.6 19V52.5c-.1-18.2-14.4-32.5-32.6-32.5zM163 155s-4.6-5.5-8.4-10.3c16.7-4.7 23.1-15.1 23.1-15.1-5.2 3.4-10.1 5.8-14.5 7.4-6.3 2.7-12.4 4.4-18.3 5.4-12.1 2.3-23.2 1.7-32.8-.1-7.2-1.4-13.5-3.4-18.7-5.4-2.9-1.1-6-2.4-9.1-4.1-.4-.2-.8-.3-1.1-.5-.3-.1-.4-.2-.6-.3-2.7-1.5-4.1-2.5-4.1-2.5s6.1 10.2 22.2 15c-3.8 4.8-8.5 10.6-8.5 10.6-28.1-.9-38.8-19.4-38.8-19.4 0-41.1 18.4-74.5 18.4-74.5 18.4-13.8 35.9-13.4 35.9-13.4l1.3 1.6c-23 6.6-33.7 16.5-33.7 16.5s2.8-1.5 7.5-3.5c13.6-5.9 24.4-7.5 28.9-7.9.7-.1 1.3-.2 2-.2 7.1-.9 15.2-1.2 23.5-.2 11 1.3 22.8 4.5 34.9 11.1 0 0-10.1-9.6-31.9-16.2l1.8-2.1s17.5-.4 35.9 13.4c0 0 18.4 33.4 18.4 74.5 0 .1-10.8 18.6-38.9 19.5z"/>
  </svg>
</a>

</body>

Related Examples

Images grid
Responsive image grid with tailwindcss.

Sienna

3 years ago

20.1k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Alok

3 years ago

62.3k
Image Grid
The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

R Thapa

2 years ago

15.4k
Bento grids

Maxim

2 years ago

22.9k
Bento Grid Layout with Images

Paul Intay

2 years ago

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

8 months ago

930
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

139
Pinterest-Style Masonry Gallery
A Pinterest-inspired masonry gallery featuring images of different heights in a seamless multi-column layout.

JUGENDRA GANGWAR

2 months ago

174
Responsive Photo Grid
A fully responsive image grid that automatically adjusts its columns across mobile, tablet, and desktop screens.

JUGENDRA GANGWAR

2 months ago

146
Creative Bento Gallery
A modern bento-style gallery combining differently sized image cards in a structured and visually engaging layout.

JUGENDRA GANGWAR

2 months ago

254
Tailwind CSS Button (Wavy Button)
The button uses Tailwind classes for size, background, border, border-radius, shadow, cursor, overflow, and transitions. The wave overlay is absolutely positioned at the bottom of the button, initially off-screen (top-full) and moves to the middle (top-1/2) on hover via the custom .wave class and keyframes. The font-poppins class isn’t a default Tailwind class. You should define it in your Tailwind configuration or replace it with font-sans if you haven't extended fonts.

KULDEEP

1 year ago

1.3k