Tailwind css feature cards

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

Feature showcase

Author Kofi Osei

Tailwind v3.4 12.1k 12

Fork Fullscreen

<div class="bg-gray-50 px-4 mt-16">
    <div class="container mx-auto py-12">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-12">
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">Beautiful Design</h2>
                    <p class="text-gray-600">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed lorem ac
                        odio dignissim cursus sed at velit.</p>
                </div>
                <div class="bg-gray-100 px-6 py-4">
                    <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn more</a>
                </div>
            </div>
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">Easy to Use</h2>
                    <p class="text-gray-600">Donec vehicula urna ac ex commodo, ac consequat ipsum aliquam. Duis vel
                        quam nec nunc suscipit lobortis.</p>
                </div>
                <div class="bg-gray-100 px-6 py-4">
                    <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn more</a>
                </div>
            </div>
            <div class="bg-white shadow-lg rounded-lg overflow-hidden">
                <div class="p-6">
                    <h2 class="text-xl font-semibold text-gray-800 mb-4">Fast Performance</h2>
                    <p class="text-gray-600">Suspendisse tincidunt metus vitae libero auctor, at aliquam purus
                        malesuada. Morbi sit amet lectus non sapien aliquet rutrum.</p>
                </div>
                <div class="bg-gray-100 px-6 py-4">
                    <a href="#" class="text-blue-600 font-medium hover:text-blue-800">Learn more</a>
                </div>
            </div>
        </div>
    </div>
</div>

Related Examples

Feature tiles

Nishant Trivedi

3 years ago

15.2k
Simple Features section

Odessa Young

3 years ago

17.8k
Feature cards

Fagundo67

3 years ago

11.5k
Feature showcase cards

Lukas Müller

3 years ago

14.9k
Products Layout
An ecommerce store front product list layout

Developer Kwame

1 year ago

1.1k
Basic features section
Display your most important features

Dipti narayan

3 years ago

7.9k
Typical feature

Matti

1 year ago

1.9k
Feature Cards
w/ large icons

Mr Robot

4 years ago

10.5k
Product feature section
Showcase product features with an image

Anonymous

3 years ago

14.7k
Experiance & Explanation
Here my beautiful component that is being seen and used more and more. Hopefully you like it and find it useful too

Matti

1 year ago

1.9k
countdown with Tailwind CSS and Alpinejs

Michael Andreuzza

2 years ago

3k
Responsive Features Section
It's a Handy Ready to Use Responsive Features or Services Component with Dark Mode

Ragnar lodbrok

2 years ago

6.1k