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

10

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

13.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

2 years ago

57.9k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

2 years ago

18.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

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

Author:
Arya

2 years ago

42.2k
Company icons grid

Author:
Amit Pachange

2 years ago

12.5k
Responsive Features Section

Author:
ᴀʀ!ᴀ

3 months ago

405
Cards - Users Card DaddyBrasil
Users card grid list - daddybrasil.com.br

Author:
Casimiro Rocha

8 months ago

1.9k
Bento grids

Author:
Maxim

1 year ago

19.5k
Grid (2x3)

Author:
Maxim

3 months ago

581
Responsive Multi-Tier Pricing Table Component
flexible and responsive 3-tier pricing table component built with HTML and Tailwind CSS. Features distinct visual styles for different plans (e.g., highlighting a recommended option), adapts to various screen sizes, and supports both light and dark color schemes. Uses generic placeholders for easy adaptation to any product or service.

Author:
Hamza Atig

3 months ago

468
Masonry Grid
Auto-adjusting masonry grid

Author:
Simon Scheffer

2 years ago

30.4k

Explore components by Tags

Didn't find component you were looking for?

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

© 2025 TailwindFlex. All Rights Reserved.

v1.1