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

16.8k

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

13.9k
Feature showcase cards

Author:
Lukas Müller

2 years ago

13.9k
Why choose us section
list your product features beautifully

Author:
Sameer Sultana

2 years ago

28.1k
Product features list with inner border

Author:
Lîmåã M

2 years ago

14.2k
Responsive Features section

Author:
Piet Vriend

3 years ago

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

Author:
Kofi Osei

2 years ago

11.3k
Card grid for showing features

Author:
Steven Kuhn

3 years ago

11k
Feature cards for company website
Each card provides a brief description of a specific feature, making it easy for users to understand the benefits and capabilities of our services

Author:
Anonymous

2 years ago

7.3k
Employee Data Management System TailwindCSS,Html
This project is made of only html and even tailwind is using CDN to save storage space. Best for SPA and routing with other components .

Author:
Siva Naga Malleswararao Kurakula

9 months ago

1.3k
Video Player
Youtube Video Player

Author:
KULDEEP

5 months ago

432
why choose us (features showcase) example

Author:
Erik Hyatt

2 years ago

16.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components