Responsive Card Grid

Tailwind CSS responsive grid for feature listing

This tailwind example is contributed by Bilal Haidar, on 06-Sep-2023. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Services,Why choose us

Card Feature showcase Grid

Author Bilal Haidar

Tailwind v3.4 3.7k 1

Fork Fullscreen

<div class="p-4 max-w-sm">
        <div class="flex rounded-lg h-full bg-teal-400 p-8 flex-col">
            <div class="flex items-center mb-3">
                <div
                    class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                        <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                    </svg>
                </div>
                <h2 class="text-white text-lg font-medium">Feature 1</h2>
            </div>
            <div class="flex flex-col justify-between flex-grow">
                <p class="leading-relaxed text-base text-white">Blue bottle crucifix vinyl post-ironic four dollar
                    toast vegan taxidermy. Gastropub indxgo juice poutine.</p>
                <a href="#" class="mt-3 text-black hover:text-blue-600 inline-flex items-center">Learn More
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
                        <path d="M5 12h14M12 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>

<div class="p-4 max-w-sm">
        <div class="flex rounded-lg h-full bg-teal-400 p-8 flex-col">
            <div class="flex items-center mb-3">
                <div
                    class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                        <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                    </svg>
                </div>
                <h2 class="text-white text-lg font-medium">Feature 2</h2>
            </div>
            <div class="flex flex-col justify-between flex-grow">
                <p class="leading-relaxed text-base text-white">Lorem ipsum dolor sit amet. In quos laboriosam non
                    neque eveniet 33 nihil molestias. Rem perspiciatis iure ut laborum inventore et maxime amet.</p>
                <a href="#" class="mt-3 text-black hover:text-blue-600 inline-flex items-center">Learn More
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
                        <path d="M5 12h14M12 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>

<div class="p-4 max-w-sm">
        <div class="flex rounded-lg h-full bg-teal-400 p-8 flex-col">
            <div class="flex items-center mb-3">
                <div
                    class="w-8 h-8 mr-3 inline-flex items-center justify-center rounded-full bg-indigo-500 text-white flex-shrink-0">
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
                        <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
                    </svg>
                </div>
                <h2 class="text-white text-lg font-medium">Feature 3</h2>
            </div>
            <div class="flex flex-col justify-between flex-grow">
                <p class="leading-relaxed text-base text-white">Lorem ipsum dolor sit amet. In quos laboriosam non
                    neque eveniet 33 nihil molestias. Rem perspiciatis iure ut laborum inventore et maxime amet.</p>
                <a href="#" class="mt-3 text-black hover:text-blue-600 inline-flex items-center">Learn More
                    <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" class="w-4 h-4 ml-2" viewBox="0 0 24 24">
                        <path d="M5 12h14M12 5l7 7-7 7"></path>
                    </svg>
                </a>
            </div>
        </div>
    </div>

</div>

Related Examples

Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.1k
Responsive Grid with Featured image

_Amar_

4 years ago

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

Amit Pachange

4 years ago

53.8k
Responsive Feature Card

Gopi Yadav

4 years ago

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

Alok

4 years ago

26.7k
Feature Card
Elevated card

Prajwal Hallale

4 years ago

10.8k
Responsive Article Section

Prashant

4 years ago

17.2k
Products card grid
Example of product card grid with product image and pricing

Noob

4 years ago

24.9k
Info cards
Show various statistics on your website

Arya

4 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25.2k
Features grid

Sophia Baker

3 years ago

10.9k
Feature display cards (grid layout)

Sophia Baker

3 years ago

15.9k