Home
nahid hasan
layout deisgn img

layout deisgn img

img grid layout

This tailwind example is contributed by nahid hasan, on 15-Mar-2025. Component is made with Tailwind CSS v3. It is responsive.

Grid

Author nahid hasan

695

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

Responsive grid layout

Author:
Kofi Osei

2 years ago

22.2k
Feature cards

Author:
Fagundo67

2 years ago

11k
Brand icons grid
showcase your 'Happy Customers'.

Author:
Kennedy Mills

2 years ago

11.1k
Image Classification Models Response Grid
by AI Without Borders

Author:
wtfbrh

11 months ago

1.2k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

16.6k
Responsive Card Grid
Tailwind CSS responsive grid for feature listing. The cards have a teal background, rounded corners, and a concise display of feature titles, descriptions, and a "Learn More" link.

Author:
Amit Pachange

3 years ago

52.1k
Responsive Features Section

Author:
ariaw

9 months ago

807
Instagram Post UI Mockup
A static HTML and Tailwind CSS component that visually replicates the user interface of an Instagram post. This mockup includes the post header (avatar, username, options), image area, action buttons (like, comment, share, save), like count, caption, and comment section. It features responsive constraints and supports both light and dark mode, closely mimicking the look and feel of the actual Instagram app. Ideal for UI prototyping, style guides, or frontend development practice.

Author:
Hamza Atig

9 months ago

1.2k
Article List Section
A section displaying a list of articles with associated information.

Author:
Junclarkaizen Pagu

2 years ago

7.2k
Tailwind product gallery

Author:
JaxStone

2 years ago

27.1k
Short and simple card grid
Best suited for news websites

Author:
Mr Robot

3 years ago

11.6k
Features grid

Author:
Sophia Baker

3 years ago

10.2k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components