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

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

3 years ago

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

52.2k
Feature display cards (grid layout)

Author:
Sophia Baker

3 years ago

15.5k
Game Character Cards
Simple game character cards selection

Author:
Diavox Jerome Soriano

1 year ago

1.5k
Grid (2x3)

Author:
Maxim

10 months ago

915
pile carde scroll
pile carde scroll

Author:
Omer fils ELENGA

1 month ago

33
Responsive landscape cards

Author:
Piet Vriend

3 years ago

10.3k
Feature Showcase + Cards
Responsive section with cards aligned using grid layout.

Author:
ABDO-SY

1 year ago

2.4k
Blog Card

Author:
ariaw

4 months ago

431
About Us
This The About Us Component with the tailwind class and some animation by tailwind and best about us page you can modify it and content is for now only clinic but you can ad your content

Author:
Sahil Sasapara

1 year ago

4.9k
bears/beats/battlestar gallactica
bears beats battlestar gallactica

Author:
Anonymous

2 years ago

9.7k
Enhanced Student Testimonials Section
A modern, interactive testimonials section featuring glassmorphism design, floating animations, and social proof elements. Includes star ratings, course badges, user profiles with online status indicators, and a stats section. Built with Tailwind CSS and features gradient backgrounds, hover effects, and responsive design optimized for showcasing student success stories and building credibility.

Author:
Muhammad Umair Arshad

6 months ago

644

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components