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

12.9k

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.4k
Feature showcase cards

Author:
Lukas Müller

2 years ago

13.7k
Bento grids

Author:
Maxim

1 year ago

20.6k
Responsive Hero Section with Typewriter Effect
A modern hero section featuring a typewriter animation effect, social media links, and responsive design. Includes a user avatar placeholder and a clean dark gradient background. Built with Tailwind CSS and Font Awesome icons. Perfect for personal portfolio websites.

Author:
Muhammad Umair Arshad

6 months ago

420
Stats Showcase
Tiles showcasing noteworthy achievements or metrics.

Author:
Andrew Hughes

1 year ago

9.3k
Responsive cards layout

Author:
Piet Vriend

2 years ago

12.8k
Comparison Pricing Table Component
A responsive pricing table built with HTML and Tailwind CSS, comparing two plans (Free and Unlimited) with a clear feature checklist. Includes distinct styling for the premium plan and a toggle for monthly/annual pricing display.

Author:
Hamza Atig

5 months ago

797
Responsive Grid with Featured image

Author:
_Amar_

3 years ago

12.3k
Galerie de produits Gis et Affiche Tailwind

Author:
kouassi ange anisco

7 months ago

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

Author:
SAI BENDE

2 months ago

287
Blog items skeleton

Author:
Nii Anyetei

1 year ago

2.1k
Short and simple card grid
Best suited for news websites

Author:
Mr Robot

2 years ago

11.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components