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.

This tailwind example is contributed by Alok, on 08-Jan-2023. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example are Masonry, Image grid

Image gallery Grid

Author Alok

Tailwind v3.4 62.4k 38

Fork Fullscreen

<div class="bg-white dark:bg-gray-800 h-screen h-full py-6 sm:py-8 lg:py-12">
    <div class="mx-auto max-w-screen-2xl px-4 md:px-8">
        <div class="mb-4 flex items-center justify-between gap-8 sm:mb-8 md:mb-12">
            <div class="flex items-center gap-12">
                <h2 class="text-2xl font-bold text-gray-800 lg:text-3xl dark:text-white">Gallery</h2>

<p class="hidden max-w-screen-sm text-gray-500 dark:text-gray-300 md:block">
                    This is a section of some simple filler text,
                    also known as placeholder text. It shares some characteristics of a real written text.
                </p>
            </div>

<a href="#"
                class="group relative flex h-48 items-end overflow-hidden rounded-lg bg-gray-100 shadow-lg md:col-span-2 md:h-80">
                <img src="https://images.unsplash.com/photo-1542759564-7ccbb6ac450a?auto=format&q=75&fit=crop&w=1000" loading="lazy" alt="Photo by Magicle" class="absolute inset-0 h-full w-full object-cover object-center transition duration-200 group-hover:scale-110" />

<a href="#"
                class="group relative flex h-48 items-end overflow-hidden rounded-lg bg-gray-100 shadow-lg md:col-span-2 md:h-80">
                <img src="https://images.unsplash.com/photo-1610465299996-30f240ac2b1c?auto=format&q=75&fit=crop&w=1000" loading="lazy" alt="Photo by Martin Sanchez" class="absolute inset-0 h-full w-full object-cover object-center transition duration-200 group-hover:scale-110" />

<a href="#"
                class="group relative flex h-48 items-end overflow-hidden rounded-lg bg-gray-100 shadow-lg md:h-80">
                <img src="https://images.unsplash.com/photo-1550745165-9bc0b252726f?auto=format&q=75&fit=crop&w=600" loading="lazy" alt="Photo by Lorenzo Herrera" class="absolute inset-0 h-full w-full object-cover object-center transition duration-200 group-hover:scale-110" />

<span class="relative ml-4 mb-3 inline-block text-sm text-white md:ml-5 md:text-lg">Retro</span>
            </a>
            
        </div>
    </div>
</div>

Related Examples

Masonry Grid
Auto-adjusting masonry grid

Simon Scheffer

3 years ago

32.9k
Images grid
Responsive image grid with tailwindcss.

Sienna

3 years ago

20.1k
image gallery
image gallery [lightbox]

Anonymous

3 years ago

20.9k
Image gallery using grid
basic image gallery that displays images in a responsive grid, with an overlay and a "View" button that appears on hover. You can further customize and enhance it to fit your design and functionality requirements.

Prajwal Hallale

3 years ago

10.7k
Responsive products grid
Responsive product card grid using tailwind CSS.

Arya

3 years ago

46.2k
Bento grids

Maxim

2 years ago

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

3 years ago

15.4k
Card grid for posts

Mr Robot

3 years ago

24.2k
Tailwind image grid
tailwind picture grid

Anonymous

2 years ago

11.4k
Products card grid
Example of product card grid with product image and pricing

Noob

4 years ago

24.9k
Tailwind product gallery

JaxStone

3 years ago

27.9k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Alok

4 years ago

26.7k
Responsive Card Grid with images

TailwindFlex

4 years ago

21.1k
Verticle card grid
Best suited for news websites

Mr Robot

3 years ago

14.3k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.3k
Responsive grid layout

Kofi Osei

3 years ago

22.9k
Products cards w/ hover effect
Example of product card grid with product image, pricing and a hover effect FORKED FROM: https://tailwindflex.com/noob_dev/products-card-grid

threehymns

3 years ago

20.2k
Feature display cards (grid layout)

Sophia Baker

3 years ago

15.9k