Home
Fagundo67
Feature cards

Feature cards

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

Feature showcase Grid

Author Fagundo67

10.7k

Fork Fullscreen

<div class="bg-gray-100 min-h-screen p-4">
    <div class="container mx-auto pt-12 pb-20">
        <h1 class="text-4xl font-bold text-gray-800 text-center mb-8">
            Welcome to my website
        </h1>
        <p class="text-gray-700 text-lg text-center mb-12">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet magna id ex hendrerit semper.
        </p>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
            <div class="bg-white rounded-lg shadow-lg p-8">
                <h2 class="text-xl font-bold text-gray-800 mb-4">Services</h2>
                <p class="text-gray-700">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet magna id ex hendrerit
                    semper.
                </p>
            </div>
            <div class="bg-white rounded-lg shadow-lg p-8">
                <h2 class="text-xl font-bold text-gray-800 mb-4">About Us</h2>
                <p class="text-gray-700">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet magna id ex hendrerit
                    semper.
                </p>
            </div>
            <div class="bg-white rounded-lg shadow-lg p-8">
                <h2 class="text-xl font-bold text-gray-800 mb-4">Contact</h2>
                <p class="text-gray-700">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet magna id ex hendrerit
                    semper.
                </p>
            </div>
        </div>
    </div>
</div>

Related Examples

Feature showcase cards

Author:
Lukas Müller

2 years ago

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

Author:
Alok

3 years ago

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

Author:
Amit Pachange

3 years ago

51.5k
Features grid

Author:
Sophia Baker

2 years ago

10k
Tailwind image gallery
Responsive grid with evenly spaced image cards. Each card has a title label at the bottom, and there's a subtle hover effect for interactive engagement.

Author:
Alok

2 years ago

60k
Basic responsive card grid
supports dark mode

Author:
Samuel Dawson

2 years ago

11.5k
Feature showcase with images

Author:
Amit Pachange

2 years ago

13.7k
Responsive Feature Card

Author:
Gopi Yadav

3 years ago

13.3k
Features cards section
Features cards section with dark theme

Author:
Sophia Baker

2 years ago

10k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

28k
Features section
Showcase your key features

Author:
Manon Daniel

2 years ago

16.4k
Feature display cards (grid layout)

Author:
Sophia Baker

2 years ago

15.2k
Responsive products grid
Responsive product card grid using tailwind CSS.

Author:
Arya

3 years ago

43.7k
Tailwind css feature cards

Author:
Kofi Osei

2 years ago

11.2k
Feature tiles

Author:
Nishant Trivedi

2 years ago

14k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components