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

10.1k

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

1 year ago

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

44.6k
Info cards grid with icons
Evenly-sized cards for showing various stats on the user/admin dashboard.

Author:
Prajwal Hallale

1 year ago

7.6k
Responsive card grid
responsive card grid for articles

Author:
Mr Robot

1 year ago

12.5k
Card grid

Author:
Leon Bachmann

1 year ago

10.5k
Feature Showcase
The feature showcase's responsive grid can also be used as testimonial cards.

Author:
Alok

2 years ago

19.3k
Image Grid
The layout is designed to showcase various categories or items using images and descriptive text. Each grid item features a high-quality image and a centered text overlay with a semi-transparent background

Author:
R Thapa

1 year ago

11.7k
Amazing E-commerce card 2
An amazing e-commerce card with stunning hover effect 2

Author:
Ragnar lodbrok

1 month ago

172
Responsive cards layout

Author:
Piet Vriend

1 year ago

11.2k
Grid
Grid Grid-Cards

Author:
sardorazimov2901

6 months ago

925
Cards - Users Card
Users card grid list

Author:
Casimiro Rocha

1 month ago

493
Bento grids

Author:
Maxim

10 months ago

14.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 1800+ components