Home
gmer33
Responsive grid layout

Responsive grid layout

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

Grid

Author gmer33

13.3k

Fork Fullscreen

<main class="my-8 mx-2 md:mx-4 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
    <div class="bg-white p-6 border-2 border-dashed border-gray-400">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Box 1</h2>
        <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac volutpat est.
            Praesent id purus a nunc pharetra facilisis.
        </p>
    </div>
    <div class="bg-white p-6 border-2 border-dashed border-gray-400">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Box 2</h2>
        <p class="text-gray-600">Sed ornare sodales augue sed blandit. Sed tempor purus quis mauris consectetur, eu
            venenatis nunc bibendum.
        </p>
    </div>
    <div class="bg-white p-6 border-2 border-dashed border-gray-400">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Box 3</h2>
        <p class="text-gray-600">Nullam maximus euismod dui vitae facilisis. Fusce vulputate justo id orci tincidunt
            commodo. Sed bibendum pharetra magna ut tempor.
        </p>
    </div>
    <div class="bg-white p-6 border-2 border-dashed border-gray-400">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Box 4</h2>
        <p class="text-gray-600">Nullam maximus euismod dui vitae facilisis. Fusce vulputate justo id orci tincidunt
            commodo. Sed bibendum pharetra magna ut tempor.
        </p>
    </div>
    <div class="bg-white p-6 border-2 border-dashed border-gray-400">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Box 5</h2>
        <p class="text-gray-600">Nullam maximus euismod dui vitae facilisis. Fusce vulputate justo id orci tincidunt
            commodo. Sed bibendum pharetra magna ut tempor.
        </p>
    </div>
    <div class="bg-white p-6 border-2 border-dashed border-gray-400">
        <h2 class="text-lg font-bold text-gray-800 mb-4">Box 6</h2>
        <p class="text-gray-600">Nullam maximus euismod dui vitae facilisis. Fusce vulputate justo id orci tincidunt
            commodo. Sed bibendum pharetra magna ut tempor.
        </p>
    </div>
</main>

Related Examples

Responsive Card Grid with images

Author:
TailwindFlex

3 years ago

19.9k
Feature showcase cards

Author:
Lukas Müller

3 years ago

14.2k
Bento grids

Author:
Maxim

2 years ago

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

Author:
Junclarkaizen Pagu

2 years ago

7.3k
Food Ordering Dashboard
A responsive user interface for selecting and ordering your favorite meals. The dashboard allows users to browse food categories, view dish details, and place orders with ease.

Author:
Muhammad Umair Arshad

9 months ago

1.2k
Active Beauty Main Page

Author:
Maxim

11 months ago

1.2k
Company icons grid

Author:
Amit Pachange

3 years ago

13k
Tailwind CSS Service Card Component
An HTML and Tailwind CSS code snippet for creating a responsive service card component. Ideal for marketplaces, portfolios, or listing pages. Includes sections for image/video preview, seller info, rating, pricing, and additional details. Easy to customize using Tailwind utility classes.

Author:
Hamza Atig

10 months ago

1.2k
Product grid

Author:
ariaw

4 months ago

132
Feature display cards (grid layout)

Author:
Ronald Otieno

1 year ago

3k
Responsive Card Section With Hover Effect
added more cards with ui friendly

Author:
SAI BENDE

7 months ago

614
Game Character Cards
Simple game character cards selection

Author:
Diavox Jerome Soriano

1 year ago

1.5k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components