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

38.8k

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

Author:
Simon Scheffer

1 year ago

21.9k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

1 year ago

12.4k
image gallery
image gallery [lightbox]

Author:
Anonymous

11 months ago

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

9 months ago

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

Author:
Arya

1 year ago

30.3k
Bento grids

Author:
Maxim Alex

4 months ago

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

9 months ago

8.8k
Card grid for posts

Author:
Mr Robot

1 year ago

13.9k
Tailwind image grid
tailwind picture grid

Author:
Anonymous

7 months ago

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

Author:
Noob

1 year ago

15.3k
Tailwind product gallery

Author:
JaxStone

1 year ago

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

Author:
Alok

1 year ago

15.5k
Responsive Card Grid with images

Author:
TailwindFlex

1 year ago

13.6k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

1 year ago

10k
Card grid section
Display article/blog grid

Author:
Mr Robot

1 year ago

16.7k
Responsive grid layout

Author:
Kofi Osei

1 year ago

14.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:
jdherron1

8 months ago

11.6k
Feature display cards (grid layout)

Author:
Sophia Baker

1 year ago

11.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1400+ componenent