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

60.2k

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

31.5k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

18.8k
image gallery
image gallery [lightbox]

Author:
Anonymous

2 years ago

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

2 years ago

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

Author:
Arya

3 years ago

44k
Bento grids

Author:
Maxim

1 year ago

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

14.1k
Card grid for posts

Author:
Mr Robot

2 years ago

22.2k
Tailwind image grid
tailwind picture grid

Author:
Anonymous

1 year ago

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

Author:
Noob

3 years ago

23.5k
Tailwind product gallery

Author:
JaxStone

2 years ago

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

Author:
Alok

3 years ago

25k
Responsive Card Grid with images

Author:
TailwindFlex

3 years ago

19.6k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

13.6k
Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

28.8k
Responsive grid layout

Author:
Kofi Osei

2 years ago

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

Author:
threehymns

2 years ago

18.7k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

15.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components