Home
Samuel Dawson
Basic responsive card grid

Basic responsive card grid

supports dark mode

This tailwind example is contributed by Samuel Dawson, on 07-Feb-2023. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode.

Grid

Author Samuel Dawson

11.3k

Fork Fullscreen

<div class="py-20 px-6 md:px-12 lg:grid lg:grid-cols-2 lg:gap-8">
        <a href="#"
            class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 dark:border-gray-700 lg:mb-0">
            <h3 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Title 1</h3>
            <p class="font-normal text-gray-700 dark:text-gray-400">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            </p>
        </a>
        <a href="#"
            class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 dark:border-gray-700 lg:mb-0">
            <h3 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Title 2</h3>
            <p class="font-normal text-gray-700 dark:text-gray-400">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            </p>
        </a>
        <a href="#"
            class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 dark:border-gray-700 lg:mb-0">
            <h3 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Title 3</h3>
            <p class="font-normal text-gray-700 dark:text-gray-400">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            </p>
        </a>
        <a href="#"
            class="block p-6 mb-6 bg-white border border-gray-200 rounded-lg shadow-md dark:bg-gray-800 dark:hover:bg-gray-700 hover:bg-gray-100 dark:border-gray-700 lg:mb-0">
            <h3 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Title 4</h3>
            <p class="font-normal text-gray-700 dark:text-gray-400">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
            </p>
        </a>
    </div>
</div>

Related Examples

Feature cards

Author:
Fagundo67

2 years ago

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

49.8k
Post Responsive Grid
Laravel News post grid

Author:
Mr Robot

2 years ago

11.8k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

1 year ago

4.4k
Work Showcase Cards
Highlight your top projects or products with these cards, featuring images and brief descriptions. This example has a subtle hover effect.

Author:
Computer guy

1 year ago

11.3k
Brand Grid with Hover Effect

Author:
ᴀʀ!ᴀ

3 months ago

396
Tailwind responsive features card grid
with gradient background

Author:
Kofi Osei

2 years ago

11k
Feature tiles

Author:
Nishant Trivedi

1 year ago

13k
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

2 years ago

41.8k
Galerie de produits Gis et Affiche Tailwind

Author:
kouassi ange anisco

3 months ago

256
Blog post showcase minimal
a grid showcasing the blog posts with images and title

Author:
Henrik R.

1 year ago

2.9k
Blog Post Showcase
a grid showcasing the blog posts with images and brief descriptions

Author:
Henrik R.

1 year ago

3.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components