Home
Odessa Young
Simple Features section

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 CSS v3. It is responsive. similar terms for this example are Services,Why choose us

Feature showcase

Author Odessa Young

17.1k

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

Author:
Alok

2 years ago

14.2k
Feature showcase cards

Author:
Lukas Müller

3 years ago

14.2k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

28.7k
Product features list with inner border

Author:
Lîmåã M

2 years ago

14.4k
Responsive Features section

Author:
Piet Vriend

3 years ago

11k
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

52.2k
Tailwind css feature cards

Author:
Kofi Osei

3 years ago

11.5k
Card grid for showing features

Author:
Steven Kuhn

3 years ago

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

Author:
Matti

1 year ago

1.3k
Feature Card
Shows off a feature, great for homepages and grid layout, or can be used in dashboards for "example use" grids. Enjoy! Part of the Coastal UI collection.

Author:
Coastal UI

10 months ago

432
Features section

Author:
ariaw

4 months ago

242
Feature: Switch-Special
Here a special feature-showcase. I hope you like it ;)

Author:
Matti

1 year ago

1.7k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components