Feature cards

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

Feature showcase Grid

Author Fagundo67

Tailwind v3.4 11.5k 14

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

Lukas Müller

3 years ago

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

Alok

3 years ago

26.7k
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.6k
Features grid

Sophia Baker

3 years ago

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

Alok

3 years ago

62.3k
Basic responsive card grid
supports dark mode

Samuel Dawson

3 years ago

12.6k
Feature showcase with images

Amit Pachange

3 years ago

14.6k
Responsive Feature Card

Gopi Yadav

4 years ago

14.3k
Features cards section
Features cards section with dark theme

Sophia Baker

3 years ago

11.1k
Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.5k
Features section
Showcase your key features

Manon Daniel

3 years ago

17.5k
Feature display cards (grid layout)

Sophia Baker

3 years ago

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

Arya

3 years ago

46.1k
Tailwind css feature cards

Kofi Osei

3 years ago

12.1k
Feature tiles

Nishant Trivedi

3 years ago

15.2k