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

11.5k

9

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

1 year ago

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

2 years ago

51k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

1 year ago

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

2 years ago

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

Author:
Arya

2 years ago

37.9k
Company icons grid

Author:
Amit Pachange

2 years ago

11.9k
Card grid for posts

Author:
Mr Robot

2 years ago

18.3k
Features grid

Author:
Sophia Baker

2 years ago

8.7k
Grid
Grid Grid-Cards

Author:
sardorazimov2901

7 months ago

1.2k
Verticle card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

11.8k
Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Author:
Computer guy

1 year ago

9.9k
Service section

Author:
inbarajan P

4 months ago

672

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ 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

© 2025 TailwindFlex. All Rights Reserved.

v1.1