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

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

48.6k
Feature showcase cards

Author:
Lukas Müller

2 years ago

12.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:
kzsamir849

10 months ago

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

Author:
Arya

2 years ago

40.3k
Responsive flexbox layout using Tailwind CSS

Author:
Leif99

2 years ago

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

Author:
Alok

2 years ago

21.9k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

1 day ago

7
Responsive grid layout

Author:
Kofi Osei

2 years ago

20.5k
Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Author:
Computer guy

1 year ago

10.5k
Service section

Author:
inbarajan P

7 months ago

1.2k
Brand icons grid
showcase your 'Happy Customers'.

Author:
Kennedy Mills

1 year ago

10.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components