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

6

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

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

1 year ago

47.8k
Images grid
Responsive image grid with tailwindcss.

Author:
Sienna

1 year ago

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

2 years ago

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

Author:
Arya

2 years ago

35.8k
Company icons grid

Author:
Amit Pachange

1 year ago

11.6k
Responsive grid layout

Author:
Kofi Osei

1 year ago

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

1 year ago

8.8k
Responsive Article Section

Author:
Prashant

2 years ago

12.6k
Stats cards for admin panel
This Component is designed to present statistics in a tile format. It comprises a title, a large numeric value, and an icon, creating an eye-catching way to display data.

Author:
Prajwal Hallale

1 year ago

6.5k
Responsive Grid with Featured image

Author:
_Amar_

2 years ago

10.7k
Feature Highlights cards

Author:
Carla Hoffman

8 months ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 1700+ componenent

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

© 2024 TailwindFlex. All Rights Reserved.

v1.8