Home
UI-Templates
Luxurious Grid Gallery

Luxurious Grid Gallery

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

Image gallery Grid

Author UI-Templates

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.

Author:
Sienna

2 years ago

18.7k
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.

Author:
Alok

2 years ago

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

Author:
R Thapa

2 years ago

14k
Bento grids

Author:
Maxim

1 year ago

20.9k
Bento Grid Layout with Images

Author:
Paul Intay

1 year ago

5k
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.

Author:
Abhiraj

10 months ago

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

167
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

6 months ago

315
Slider
Responsive slider

Author:
Abhiraj

9 months ago

2k
Footer
Elevate your website design with this sleek and minimalist light mode footer component by AB NAHID AGENCY. Crafted for clean UI experiences, it’s perfect for modern web apps, blogs, and business platforms. Easy to integrate, fully responsive, and built with scalability in mind—designed to blend seamlessly with any light-themed layout.

Author:
Abdul Jabbar Al Nahid

3 months ago

512
Company icons grid

Author:
Amit Pachange

2 years ago

12.9k
Service section

Author:
inbarajan P

1 year ago

1.6k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components