Home
Kofi Osei
Tailwind css feature cards

Tailwind css feature cards

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

Feature showcase

Author Kofi Osei

11.5k

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

Author:
Nishant Trivedi

2 years ago

14.5k
Simple Features section

Author:
Odessa Young

2 years ago

17.1k
Feature cards

Author:
Fagundo67

3 years ago

11.1k
Feature showcase cards

Author:
Lukas Müller

3 years ago

14.2k
Feature cards for company website
Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

Author:
Anonymous

2 years ago

7.5k
Responsive cards with hover

Author:
Robert Chunga

1 year ago

2.9k
Portfolio with buttons
Portfolio with buttons. Portfolio item has image, title and description.

Author:
Mike Varen

1 year ago

4k
Facts
Large fact counters with the "centered" title, a quarter overstand to the right site. Die JS-Line set the titles, so you only have to change the text -- and or modify the counters- or the titles background-color. [VIEW-NOTICE] If you change the from XS over MD to XL ... right-click here into the showcase and click "reload frame" or test it on you own site directly.

Author:
Matti

1 year ago

2k
why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

17.2k
free tailwind personal portfolio template
free tailwind personal portfolio template

Author:
Geoffrey Callaghan

2 years ago

5.5k
Service section

Author:
inbarajan P

1 year ago

2.1k
Our Vision block

Author:
L.J. Weber

2 years ago

12.3k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components