Home
Leif99
Responsive flexbox layout using Tailwind CSS

Responsive flexbox layout using Tailwind CSS

This tailwind example is contributed by Leif99, on 12-Feb-2023. Component is made with Tailwind CSS v3. It is responsive.

Grid

Author Leif99

12.7k

11

Fork Fullscreen

<div class="flex flex-wrap">
    <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="bg-cyan-400 text-white h-32 md:h-64 flex items-center justify-center">
            Box 1
        </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="bg-cyan-400 text-white h-32 md:h-64 flex items-center justify-center">
            Box 2
        </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="bg-cyan-400 text-white h-32 md:h-64 flex items-center justify-center">
            Box 3
        </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="bg-cyan-400 text-white h-32 md:h-64 flex items-center justify-center">
            Box 4
        </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="bg-cyan-400 text-white h-32 md:h-64 flex items-center justify-center">
            Box 5
        </div>
    </div>
    <div class="w-full md:w-1/2 lg:w-1/3 p-4">
        <div class="bg-cyan-400 text-white h-32 md:h-64 flex items-center justify-center">
            Box 6
        </div>
    </div>
</div>

Related Examples

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

Author:
Alok

3 years ago

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

Author:
Arya

3 years ago

44.8k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

19.2k
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
Company icons grid

Author:
Amit Pachange

3 years ago

13k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 year ago

1.6k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Author:
Computer guy

2 years ago

12.5k
About our apps UI Components
A visual collection of our most recent works - each piece crafted with intention, emotion and style.

Author:
Alif Bima Pradana

1 week ago

77
avtarCard3

Author:
pablitodgb

7 months ago

983
Tailwind image grid
tailwind picture grid

Author:
Anonymous

2 years ago

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

Author:
Junclarkaizen Pagu

2 years ago

7.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2026 TailwindFlex. All Rights Reserved.

v1.12