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

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

3 years ago

51.6k
Book Showcase Grid
Responsive Book Catalog Display with buy now CTA buttons

Author:
Prajwal Hallale

1 year ago

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

Author:
Henrik R.

1 year ago

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

Author:
Ragnar lodbrok

11 months ago

1.5k
Card 30/70

Author:
Maxim

7 months ago

391
Blog items skeleton

Author:
Nii Anyetei

1 year ago

2.2k
Data Metrics Showcase
An information panel designed to instill trust, presenting vital statistics about a service or product. The grid layout offers a clean and organized look for displaying key data.

Author:
Hyun-woo Cho

2 years ago

8.5k
Card KPI
Targetas

Author:
Raul antonio de la cruz hernandez

3 days ago

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

Author:
Henrik R.

1 year ago

4.2k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

15.2k
Responsive cards layout

Author:
Piet Vriend

2 years ago

12.9k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components