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

Feature showcase cards

Author:
Lukas Müller

2 years ago

12.7k
Responsive Card Grid with images

Author:
TailwindFlex

2 years ago

17.6k
Bento grids

Author:
Maxim

1 year ago

17.7k
Post Responsive Grid
Laravel News post grid

Author:
Mr Robot

2 years ago

11.5k
Responsive Feature Card

Author:
Gopi Yadav

2 years ago

12.5k
Bento Grid Layout with Images

Author:
Paul Intay

9 months ago

3.4k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

1 year ago

8.9k
Galerie de produits Gis et Affiche Tailwind

Author:
kouassi ange anisco

1 month ago

52
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

14.4k
Contact Form Component
A multi-step, responsive contact form with a modern dark-themed design. The form includes four steps: name, email, phone number, and message. It features a side panel with contact information and a sleek, gradient-styled interface using Tailwind CSS.

Author:
Muhammad Umair Arshad

2 weeks ago

66
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

2 weeks ago

40
Products card grid
Example of product card grid with product image and pricing

Author:
Noob

2 years ago

21.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components