Product features cards

Forked from @abhi/card-grid-for-blog-posts-articles

This tailwind example is contributed by Henrik R., on 11-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Card Grid

Author Henrik R.

Tailwind v3.4 4.8k 13

Fork Fullscreen

<div class="h-screen bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-white">
    <div class="container mx-auto px-4 py-8">
        <h2 class="text-3xl font-semibold text-center text-gray-800 dark:text-gray-200 mb-8">
            Featured Resources
        </h2>

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
            <div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
                <img src="https://tailwindcss.com/_next/static/media/headlessui@75.c1d50bc1.jpg"
                    alt="Headless UI" class="w-full h-64 object-cover">
                <div class="p-4 md:p-6">
                    <h3 class="text-xl font-semibold text-indigo-500 dark:text-indigo-300 mb-2">Headless UI</h3>
                    <p class="text-gray-700 dark:text-gray-300 mb-4 two-lines">
                        Completely unstyled, fully accessible UI
                        components,
                        designed to integrate beautifully with Tailwind CSS.
                    </p>
                    <a href="#"
                        class="inline-block bg-indigo-500 hover:bg-indigo-600 text-white px-4 py-2 rounded-full">Learn
                        More</a>
                </div>
            </div>

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
                <img src="https://tailwindcss.com/_next/static/media/heroicons@75.4a558f35.jpg"
                    alt="Heroicons" class="w-full h-64 object-cover">
                <div class="p-4 md:p-6">
                    <h3 class="text-xl font-semibold text-purple-500 dark:text-purple-300 mb-2">Heroicons</h3>
                    <p class="text-gray-700 dark:text-gray-300 mb-4 two-lines">A set of 450+ free MIT-licensed SVG icons.
                        Available
                        as basic SVG icons and via first-party React and Vue libraries.</p>
                    <a href="#"
                        class="inline-block bg-purple-500 hover:bg-purple-600 text-white px-4 py-2 rounded-full">Learn
                        More</a>
                </div>
            </div>

<div class="bg-white dark:bg-gray-800 shadow-lg rounded-lg overflow-hidden">
                <img src="https://tailwindcss.com/_next/static/media/heropatterns@75.82a09697.jpg"
                    alt="Hero Patterns" class="w-full h-64 object-cover">
                <div class="p-4 md:p-6">
                    <h3 class="text-xl font-semibold text-cyan-500 dark:text-cyan-300 mb-2">Hero Patterns</h3>
                    <p class="text-gray-700 dark:text-gray-300 mb-4 two-lines">A collection of over 100 free MIT-licensed
                        high-quality
                        SVG patterns for you to use in your web projects.</p>
                    <a href="#"
                        class="inline-block bg-cyan-500 hover:bg-cyan-600 text-white px-4 py-2 rounded-full">Learn
                        More</a>
                </div>
            </div>

</div>
    </div>
</div>

Related Examples

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

Noob

3 years ago

24.8k
Card grid section
Display article/blog grid

Mr Robot

3 years ago

31.2k
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.7k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Responsive Article Section

Prashant

4 years ago

17.2k
Info cards
Show various statistics on your website

Arya

3 years ago

12k
Card grid for blog Posts / Articles

Abhijit Sen

3 years ago

25k
Features grid

Sophia Baker

3 years ago

10.8k
Blog post cards
responsive blog post cards

Mr Robot

3 years ago

13.4k
Card grid for posts

Mr Robot

3 years ago

24.2k
Responsive card grid
responsive card grid for articles

Mr Robot

3 years ago

16.6k