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

15.3k

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

1 year ago

11.4k
Feature showcase cards

Author:
Lukas Müller

1 year ago

12k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

1 year ago

24.3k
Responsive Features section

Author:
Piet Vriend

2 years ago

9.7k
Product features list with inner border

Author:
Lîmåã M

1 year ago

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

2 years ago

45.8k
Tailwind css feature cards

Author:
Kofi Osei

2 years ago

10.2k
Card grid for showing features

Author:
Steven Kuhn

2 years ago

10k
Feature showcase cards

Author:
bara masalma

4 weeks ago

116
Feature cards

Author:
Fagundo67

1 year ago

10k
Dark mode with Tailwind CSS and alpinjs

Author:
Michael Andreuzza

8 months ago

1.8k
Showcase Your Services with Interactive Animations: A Modern HTML and Tailwind CSS Example
Discover how to create an eye-catching services section using plain HTML and Tailwind CSS. This modern example features interactive animations that bring your services to life. With smooth hover effects and responsive design, this section is perfect for enhancing your website's user experience. Easily customize the content to fit your needs, and let Tailwind CSS handle the styling and transitions for a polished, professional look.

Author:
Hezron Okoko

4 months ago

903

Explore components by Tags

Didn't find component you were looking for?

Search from 1900+ components