Simple Features section

Forked from @odessa-young/coming-soon-landing-page

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

Feature showcase

Author Odessa Young

Tailwind v3.4 17.8k 17

Fork Fullscreen

<section class="bg-gray-200 py-20">
    <div class="container mx-auto px-4">
        <div class="max-w-2xl mx-auto text-center">
            <h2 class="text-3xl font-bold mb-6">What to expect</h2>
            <p class="text-gray-600 mb-12">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec orci
                quis justo aliquam euismod eget a leo. Sed eget orci feugiat, porttitor nibh vel, faucibus mauris.
            </p>
        </div>
        <div class="flex flex-wrap -mx-4 mt-12">
            <div class="w-full md:w-1/3 px-4 mb-8">
                <div class="rounded-md bg-white shadow-md p-8">
                    <div class="text-4xl font-bold text-purple-600 mb-4">01</div>
                    <h3 class="text-2xl font-bold mb-4">Feature 1</h3>
                    <p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec
                        orci quis justo aliquam euismod eget a leo.</p>
                </div>
            </div>
            <div class="w-full md:w-1/3 px-4 mb-8">
                <div class="rounded-md bg-white shadow-md p-8">
                    <div class="text-4xl font-bold text-purple-600 mb-4">02</div>
                    <h3 class="text-2xl font-bold mb-4">Feature 2</h3>
                    <p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec
                        orci quis justo aliquam euismod eget a leo.</p>
                </div>
            </div>

<div class="w-full md:w-1/3 px-4 mb-8">
                <div class="rounded-md bg-white shadow-md p-8">
                    <div class="text-4xl font-bold text-purple-600 mb-4">03</div>
                    <h3 class="text-2xl font-bold mb-4">Feature 3</h3>
                    <p class="text-gray-600 mb-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec
                        orci quis justo aliquam euismod eget a leo.</p>
                </div>
            </div>
        </div>
    </div>
</section>

Related Examples

Features grid example
Tailwind clean and responsive features section with the heading

Alok

3 years ago

14.6k
Feature showcase cards

Lukas Müller

3 years ago

14.8k
Why choose us section
list your product features beautifully

Sameer Sultana

3 years ago

29.5k
Product features list with inner border

Lîmåã M

3 years ago

15.1k
Responsive Features section

Piet Vriend

4 years ago

11.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.8k
Tailwind css feature cards

Kofi Osei

3 years ago

12.1k
Card grid for showing features

Steven Kuhn

3 years ago

11.5k
why choose us (features showcase) example

Erik Hyatt

3 years ago

17.9k
Warb feature
Here another idea... [update] - mobile device fixed (curr iPh, Smg)

Matti

1 year ago

3k
Typical feature

Matti

1 year ago

1.9k
Services showcase Section
With hover effect on cards

Anonymous

2 years ago

3.2k