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.5k
Responsive Card Grid with images

Author:
TailwindFlex

3 years ago

19.1k
Bento grids

Author:
Maxim

1 year ago

20.3k
Bento Grid Layout with Images

Author:
Paul Intay

1 year ago

4.7k
Product features cards

Author:
Henrik R.

1 year ago

3.5k
Content showing for Call to action

Author:
inbarajan P

1 year ago

1.9k
Card 30/70

Author:
Maxim

5 months ago

351
Company icons grid

Author:
Piet Vriend

2 years ago

10k
Responsive Tailwind CSS Listing Cards
This is a collection of responsive listing cards built with Tailwind CSS, optimized for modern web applications. The component features a flexbox layout, ensuring seamless responsiveness across mobile, tablet, and laptop screens. Each card includes an image, title, and description, styled for both light and dark modes. Perfect for showcasing products, portfolio items, or blog posts.

Author:
Abhiraj

8 months ago

1.7k
Grid
Grid Grid-Cards

Author:
sardorazimov2901

1 year ago

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

4 months ago

828
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

5 months ago

354

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components