DesignCools

Tailwind Gallery UI Design

Explore stunning tailwind gallery UI design crafted for optimal user engagement and seamless browsing. Discover layouts that showcase images beautifully, from grid and masonry to carousel styles, perfect for portfolios, e-commerce, and creative websites. Enhance your website’s visual appeal with our tailwind gallery ui designs.

All Images use in this website for showing purpose only, if you want to use in your business website please purchase it.

Tailwind Gallery UI Design: Horizontal Listing

Preview

natural
wedding
fly-bird
wedding-ceremony
flying-birds
anniversary
beautiful-girl

Show Code

<div class="container py-24 mx-auto">
                <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-12">
                    <div class="col-span-1 sm:col-span-2 lg:col-span-3">
                        <div class="h-[20rem]">
                            <img class="h-full w-full object-cover" src="https://designcools.com/wp-content/uploads/2024/10/premium_photo-1673643405538-de0f82933fcb-scaled.jpeg" alt="natural" />
                        </div>
                    </div>
                    <div class="col-span-1">
                        <div class="h-[20rem]">
                            <img class="h-full w-full object-cover" alt="wedding" src="https://designcools.com/wp-content/uploads/2024/10/fairytale-wedding-cascading-floral-archway_1308549-80295.avif" />
                        </div>
                    </div>
                    <div class="col-span-1 sm:col-span-1 lg:col-span-2">
                        <div class="h-[20rem]">
                            <img class="h-full w-full object-cover" src="https://designcools.com/wp-content/uploads/2024/10/pexels-enginakyurt-1435849-scaled.jpg" alt="fly-bird" />
                        </div>
                    </div>
                    <div class="col-span-1 sm:col-span-2 lg:col-span-3">
                        <div class="h-[20rem]">
                            <img class="h-full w-full object-cover" src="https://designcools.com/wp-content/uploads/2024/10/Image-3_Instagram_Parineeti-Chopra_65114928a638f.jpeg" alt="wedding-ceremony" />
                        </div>
                    </div>
                    <div class="col-span-1 sm:col-span-2 lg:col-span-3">
                        <div class="h-[7rem]">
                            <img class="h-full w-full object-cover" src="https://designcools.com/wp-content/uploads/2024/10/360_F_208758619_i42Fj7HVUibHegABGZDI2yokxGy54KBd.jpg" alt="flying-birds" />
                        </div>
                        <div class="grid grid-cols-2">
                            <div class="h-[13rem]">
                                <img class="h-full w-full object-cover" alt="anniversary" src="https://designcools.com/wp-content/uploads/2024/10/fairytale-wedding-cascading-floral-archway_1308549-80295.avif" />
                            </div>
                            <div class="h-[13rem]">
                                <img class="h-full w-full object-cover" src="https://designcools.com/wp-content/uploads/2024/10/img_3180.jpg" alt="beautiful-girl" />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

Tailwind Gallery UI Design : Side by side view

Preview

Our Work

We use the power of design to solve complex problems and cultivate business solutions.

gallery section design

BRANDING, DESIGN

gallery section design

BRANDING, DESIGN

gallery section design

BRANDING, DESIGN

gallery section design

BRANDING, DESIGN

Show Code

<div class="pb-24 max-w-7xl mx-auto px-4 xl:px-0">
    <div class="flex flex-col sm:flex-row py-6 pb-12 justify-between gap-x-12">
        <div class="mb-6 sm:mb-0">
            <h3 class="text-2xl border inline-flex rounded-full border-gray-400 py-2 px-6 font-extrabold uppercase">Our Work</h3>
        </div>
        <p class="max-w-md">
            We use the power of design to solve complex problems and cultivate business solutions.
        </p>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-12 gap-6">
        <div class="col-span-8">
            <div class="aspect-video overflow-hidden">
                <img class="w-full h-full object-cover rounded-2xl" src="https://designcools.com/wp-content/uploads/2024/10/pexels-enginakyurt-1435849-scaled.jpg" alt="gallery section design" />
            </div>
        </div>
        <div class="col-span-4 flex flex-col  justify-end">
            <label class="text-xl font-bold lg:text-3xl">THE RISE OF DESIGN</label>
            <p class="uppercase text-base mt-1">BRANDING, DESIGN</p>
        </div>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-12 gap-6 mt-6">
        <div class="col-span-6">
            <div class="aspect-video overflow-hidden">
                <img class="w-full h-full object-cover rounded-2xl" src="https://designcools.com/wp-content/uploads/2024/10/premium_photo-1673643405538-de0f82933fcb-scaled.jpeg" alt="gallery section design" />
            </div>
            <div class="flex flex-col mt-3 justify-end">
             <label class="text-xl font-bold lg:text-3xl">THE RISE OF DESIGN</label>
            <p class="uppercase text-base mt-1">BRANDING, DESIGN</p>
            </div>
        </div>
        <div class="col-span-6">
            <div class="aspect-video overflow-hidden">
                <img class="w-full h-full object-cover rounded-2xl" src="https://designcools.com/wp-content/uploads/2024/10/lightbulb-innovation.jpg" alt="gallery section design" />
            </div>
            <div class="flex flex-col mt-3 justify-end">
                 <label class="text-xl font-bold lg:text-3xl">THE RISE OF DESIGN</label>
            <p class="uppercase text-base mt-1">BRANDING, DESIGN</p>
            </div>
        </div>
    </div>
    <div class="grid grid-cols-1 sm:grid-cols-12 gap-6 mt-6">
        <div class="hidden sm:flex col-span-4 flex-col justify-end">
            <label class="text-xl font-bold lg:text-3xl">THE RISE OF DESIGN</label>
            <p class="uppercase text-base mt-1">BRANDING, DESIGN</p>
        </div>
        <div class="col-span-8">
            <div class="aspect-video overflow-hidden">
                <img class="w-full h-full object-cover rounded-2xl" src="https://designcools.com/wp-content/uploads/2024/10/360_F_208758619_i42Fj7HVUibHegABGZDI2yokxGy54KBd.jpg" alt="gallery section design" />
            </div>
        </div>
        <div class="sm:hidden col-span-4 flex flex-col justify-end">
             <label class="text-xl font-bold lg:text-3xl">THE RISE OF DESIGN</label>
            <p class="uppercase text-base mt-1">BRANDING, DESIGN</p>
        </div>
    </div>
</div>

Preview

tailwind gallery ui design
gallery component design
gallery section design
gallery ui design

Show Code

<div class="max-w-4xl py-12 mx-auto px-4 xl:px-0">
    <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 sm:col-span-6">
            <div class="h-[30rem] mb-6">
                <img class="h-full w-full object-cover" alt="tailwind gallery ui design" src="https://designcools.com/wp-content/uploads/2024/10/pexels-enginakyurt-1435849-scaled.jpg" />
            </div>
            <div class="h-[15rem]">
                <img class="h-full w-full object-cover" alt="gallery component design" src="https://designcools.com/wp-content/uploads/2024/10/premium_photo-1673643405538-de0f82933fcb-scaled.jpeg" />
            </div>
        </div>
        <div class="col-span-12 sm:col-span-6">
            <div class="h-[25rem] mb-6">
                <img class="h-full w-full object-cover" src="https://designcools.com/wp-content/uploads/2024/10/img_3180.jpg" alt="gallery section design" />
            </div>
            <div class="h-[20rem] relative">
                <div class="w-full sm:w-[calc(100%+6rem)] bg-white relative sm:absolute bottom-0 right-0">
                    <img class="h-full w-full pl-0 sm:pl-6 pt-0 sm:pt-6 object-cover" src="https://designcools.com/wp-content/uploads/2024/10/fairytale-wedding-cascading-floral-archway_1308549-80295.avif" alt="gallery ui design" />
                </div>
            </div>
        </div>
    </div>
</div>

Gallery ui design plays a crucial role in visually engaging users and conveying a brand’s identity, products, portfolio, or services.

Tailwind Gallery UI Design With Description

Preview

gallery ui design
BROWSE THE

Portfolio

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium, quo rem, error debitis enim facere quam mamagnam natus.

1

gallery section design
LEARN ALL

About Us

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium, quo rem, error debitis enim facere quam mamagnam natus.

2

gallery design blocks
DISCOVER THE

Experience

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium, quo rem, error debitis enim facere quam mamagnam natus.

3

Show Code

<div class="max-w-3xl py-24 mx-auto">
    <div class="grid grid-cols-1 sm:grid-cols-2">
        <div class="h-auto sm:h-[30rem]">
            <img class="h-full w-full object-cover" alt="gallery ui design" src="https://designcools.com/wp-content/uploads/2024/10/Image-3_Instagram_Parineeti-Chopra_65114928a638f.jpeg" />
        </div>

        <div class="min-h-[30rem] sm:h-auto px-10 pt-16 bg-gray-100 overflow-hidden relative">
            <span class="inline-flex justify-center w-full text-sm font-medium tracking-widest">BROWSE THE</span>
            <h2 class="text-3xl text-center relative  font-medium mt-3 pb-12 before:h-[2rem] before:w-[1px] before:bg-black before:absolute before:bottom-[0.5rem] before:-translate-x-1/2 before:left-1/2">Portfolio</h2>
            <p class="text-sm text-center">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium, quo rem, error debitis enim facere quam mamagnam natus.
            </p>
            <div class="flex border-t pt-6 mt-6 justify-center">
                <button class="text-[1rem] font-medium">GO EXPLORE</button>
            </div>
            <h3 class="text-8xl absolute left-1/2 opacity-10 -translate-x-1/2 -bottom-[1.5rem] font-bold text-center">1</h3>
        </div>
        <div class="sm:hidden h-auto sm:h-[30rem]">
            <img class="h-full w-full object-cover" alt="gallery section design" src="https://designcools.com/wp-content/uploads/2024/10/fairytale-wedding-cascading-floral-archway_1308549-80295.avif" />
        </div>
        <div class="min-h-[30rem] sm:h-auto px-10 pt-16 bg-gray-100 overflow-hidden relative">
            <span class="inline-flex justify-center w-full text-sm font-medium tracking-widest">LEARN ALL</span>

            <h2 class="text-3xl text-center font-medium mt-3 pb-12 relative before:h-[2rem] before:w-[1px] before:bg-black before:absolute before:bottom-[0.5rem] before:-translate-x-1/2 before:left-1/2">About Us</h2>
            <p class="text-sm text-center">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium, quo rem, error debitis enim facere quam mamagnam natus.
            </p>
            <div class="flex border-t pt-6 mt-6 justify-center">
                <button class="text-[1rem] font-medium">GO EXPLORE</button>
            </div>
            <h3 class="text-8xl absolute left-1/2 opacity-10 -translate-x-1/2 -bottom-[1.5rem] font-bold text-center">2</h3>
        </div>
        <div class="hidden sm:block h-auto sm:h-[30rem]">
            <img class="h-full w-full object-cover" alt="gallery section ui design" src="https://designcools.com/wp-content/uploads/2024/10/fairytale-wedding-cascading-floral-archway_1308549-80295.avif" />
        </div>

        <div class="h-auto sm:h-[30rem]">
            <img class="h-full w-full object-cover" alt="gallery design blocks" src="https://designcools.com/wp-content/uploads/2024/10/img_3180.jpg" />
        </div>

        <div class="min-h-[30rem] sm:h-auto  px-10 pt-16 bg-gray-100 overflow-hidden relative">
            <span class="inline-flex justify-center w-full text-sm font-medium tracking-widest">DISCOVER THE</span>

            <h2 class="text-3xl text-center font-medium mt-3 pb-12 relative before:h-[2rem] before:w-[1px] before:bg-black before:absolute before:bottom-[0.5rem] before:-translate-x-1/2 before:left-1/2">Experience</h2>
            <p class="text-sm text-center">
                Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium, quo rem, error debitis enim facere quam mamagnam natus.
            </p>
            <div class="flex border-t pt-6 mt-6 justify-center">
                <button class="text-[1rem] font-medium">GO EXPLORE</button>
            </div>
            <h3 class="text-8xl absolute left-1/2 opacity-10 -translate-x-1/2 -bottom-[1.5rem] font-bold text-center">3</h3>
        </div>
    </div>
</div>

Preview

no-ig
tailwind gallery section ui design

Want to Know?

Who we are?

No

Crafting Brands

& Ideas for life

7
gallery section ui design
gallery component ui design

Show Code

<div class="max-w-4xl py-24 px-4 xl:px-0 mx-auto">
    <div class="grid grid-cols-12 gap-6">
        <div class="col-span-12 sm:col-span-4">
            <div class="h-[20rem] mb-6 relative">
                <div class="hidden xl:block absolute underline font-bold uppercase -left-[7rem] top-1/2">
                    <p>Want to Know?</p>
                    <p>Who we are?</p>
                </div>
                <img class="h-full w-full object-cover" alt="gallery section ui design" src="https://designcools.com/wp-content/uploads/2024/10/img_3180.jpg" />
            </div>
            <div class="h-[22rem]">
                <img class="h-full w-full object-cover" alt="gallery section ui design" src="https://designcools.com/wp-content/uploads/2024/10/fairytale-wedding-cascading-floral-archway_1308549-80295.avif" />
            </div>
            <div class="underline mt-4 xl:hidden font-bold uppercase">
                <p>Want to Know?</p>
                <p>Who we are?</p>
            </div>
        </div>
        <div class="col-span-12 sm:col-span-8">
            <div class="flex mb-6 justify-end items-center">
                <div class="flex flex-col">
                    <span class="text-right text-4xl">No</span>
                    <p class="text-[1rem]">Crafting Brands</p>
                    <p class="text-[1rem]">& Ideas for life</p>
                </div>
                <span class="text-9xl">7</span>
            </div>
            <div class="h-[20rem] mb-6">
                <img class="h-full w-full object-cover" src="https://designcools.com/wp-content/uploads/2024/10/premium_photo-1673643405538-de0f82933fcb-scaled.jpeg" alt="tailwind gallery section ui design" />
            </div>
            <div class="h-[20rem]">
                <img class="h-full w-full object-cover" src="https://designcools.com/wp-content/uploads/2024/10/pexels-enginakyurt-1435849-scaled.jpg" alt="gallery section ui design" />
            </div>
        </div>
    </div>
</div>

Gallery sections can vary widely based on the website’s purpose and style. Common layouts include grid, masonry, carousel, and slider formats.

Another growing trend in gallery sections is integrating video content alongside static images. Videos offer a dynamic storytelling approach and can be particularly effective for demonstrating products, sharing customer testimonials, or presenting events.

900+ UI Components

Stay in the loop with everything you need to know.

Check Now

Want to learn animation check out our youtube channel web99