Responsive flexbox layout using Tailwind CSS

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

Grid

Author Leif99

Tailwind v3.4 13.7k 12

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

R Thapa

3 years ago

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

Alok

3 years ago

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

Arya

3 years ago

46.2k
Images grid
Responsive image grid with tailwindcss.

Sienna

3 years ago

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

Amit Pachange

4 years ago

53.8k
Company icons grid

Amit Pachange

3 years ago

13.7k
Gaming Platforms Grid

ariaw

9 months ago

883
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Logo grid

ariaw

11 months ago

719
Blog Post List

Carlos

2 years ago

3k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Coastal UI

1 year ago

791
Blog items skeleton

Nii Anyetei

2 years ago

3.4k

Browse by topic

Explore components by Tags

Jump straight to the UI pattern you need.

Footer Header Card Article Avatar FAQ Banner Blog Breadcrumb Button Call to Action Form Carousel Contact us Error page Feature Gallery Hero Input Spinner Login Modal Pagination Pricing Profile

Can't find it?

Didn't find the component you were looking for?

Search across 3,000+ community-built components and grab the code in seconds.