Home
Henrik R.
Product features cards

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 CSS v3. It is responsive. It supports dark mode.

Card Grid

Author Henrik R.

3.2k

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

Card grid section
Display article/blog grid

Author:
Mr Robot

2 years ago

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

Author:
Noob

2 years ago

22.2k
Feature overview cards
The component is designed to be responsive, featuring a title, a brief description, and a set of cards presenting key metrics.

Author:
Nikita

1 year ago

4.4k
Department Card

Author:
Ashok Kumar

11 months ago

1.3k
Simple responsive cards

Author:
Shakti

2 years ago

9.2k
Signup And Signin page
Signup And Signin page with tab controller

Author:
Akram Khan

11 months ago

2.2k
Clickable and Responsive Card Grid
It is designed to showcase and link to various topics or content categories.

Author:
R Thapa

1 year ago

10k
Product card for eCommerce website

Author:
Steven Kuhn

2 years ago

12k
Responsive Testimonial Card with stars ratings

Author:
Quentin Rivers

8 months ago

1.3k
cards order
odering samethng

Author:
Uwase Alliance

4 weeks ago

83
Responsive Cards with Hover Text Reveal Animation - Built with Tailwind CSS
nhance your website with these sleek, responsive cards designed using Tailwind CSS! Featuring a stylish hover animation, the text smoothly reveals when you hover over the card, adding a dynamic touch to your user interface. Perfect for portfolios, team profiles, or project showcases, this design adapts seamlessly to all screen sizes.

Author:
Abdul Baset Bappy

2 months ago

556
Animated Info Card
Animated info card

Author:
Shivam Vishwakarma

5 months ago

993

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components