Home
Alok
Tailwind image gallery

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 CSS v3. It is responsive. It supports dark mode. similar terms for this example are Masonry, Image grid

Image gallery Grid

Author Alok

51k

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

Author:
Simon Scheffer

2 years ago

27.9k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

1 year ago

16.3k
image gallery
image gallery [lightbox]

Author:
Anonymous

1 year ago

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

Author:
Prajwal Hallale

1 year ago

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

Author:
Arya

2 years ago

37.9k
Bento grids

Author:
Maxim

11 months ago

15.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

Author:
R Thapa

1 year ago

12.1k
Card grid for posts

Author:
Mr Robot

2 years ago

18.3k
Tailwind image grid
tailwind picture grid

Author:
Anonymous

1 year ago

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

Author:
Noob

2 years ago

19.8k
Tailwind product gallery

Author:
JaxStone

1 year ago

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

Author:
Alok

2 years ago

20k
Responsive Card Grid with images

Author:
TailwindFlex

2 years ago

16.7k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

11.8k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

23k
Responsive grid layout

Author:
Kofi Osei

1 year ago

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

Author:
threehymns

1 year ago

15.2k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

13.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components