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

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

13.2k
Responsive Card Grid with images

Author:
TailwindFlex

2 years ago

18.4k
Bento grids

Author:
Maxim

1 year ago

19.5k
avtarCard3

Author:
pablitodgb

2 weeks ago

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

Author:
Noob

2 years ago

22.4k
Game Character Cards
Simple game character cards selection

Author:
Diavox Jerome Soriano

5 months ago

883
Twitter Post (Tweet) UI Mockup
A detailed static HTML and Tailwind CSS component replicating the user interface of a single Twitter post (Tweet). This mockup includes the user avatar, tweet header (name, handle, timestamp), tweet text with styled hashtags/mentions, optional media display, and the action bar with icons and counts (Reply, Retweet, Like, Views, Share). It is responsive, supports light and dark modes, and uses accurate iconography and hover states to closely resemble the real Twitter UI.

Author:
Hamza Atig

2 months ago

204
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

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

2 months ago

530
Tailwind responsive card grid

Author:
Piet Vriend

2 years ago

10.3k
Responsive landscape cards

Author:
Piet Vriend

2 years ago

10k
Card grid for showing features

Author:
Steven Kuhn

2 years ago

10.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components