How does it work?

This tailwind example is contributed by Abdul Baset Bappy, on 19-Jun-2025. Component is made with Tailwind v3.4. It is responsive. similar terms for this example are Info, Show info, Statistics,stepper

Stats Steps

Author Abdul Baset Bappy

Tailwind v3.4 1.3k 3

Fork Fullscreen

<section class="py-10 bg-white sm:py-16 lg:py-24">
    <div class="px-4 mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div class="max-w-2xl mx-auto text-center">
            <h2 class="text-3xl font-bold leading-tight text-black sm:text-4xl lg:text-5xl">How does it work?</h2>
            <p class="max-w-lg mx-auto mt-4 text-base leading-relaxed text-gray-600">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis.</p>
        </div>

<div class="relative grid grid-cols-1 text-center gap-y-12 md:grid-cols-3 gap-x-12">
                <div>
                    <div class="flex items-center justify-center w-16 h-16 mx-auto bg-white border-2 border-gray-200 rounded-full shadow">
                        <span class="text-xl font-semibold text-gray-700"> 1 </span>
                    </div>
                    <h3 class="mt-6 text-xl font-semibold leading-tight text-black md:mt-10">Create a free account</h3>
                    <p class="mt-4 text-base text-gray-600">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
                </div>

<div>
                    <div class="flex items-center justify-center w-16 h-16 mx-auto bg-white border-2 border-gray-200 rounded-full shadow">
                        <span class="text-xl font-semibold text-gray-700"> 2 </span>
                    </div>
                    <h3 class="mt-6 text-xl font-semibold leading-tight text-black md:mt-10">Build your website</h3>
                    <p class="mt-4 text-base text-gray-600">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
                </div>

<div>
                    <div class="flex items-center justify-center w-16 h-16 mx-auto bg-white border-2 border-gray-200 rounded-full shadow">
                        <span class="text-xl font-semibold text-gray-700"> 3 </span>
                    </div>
                    <h3 class="mt-6 text-xl font-semibold leading-tight text-black md:mt-10">Release & Launch</h3>
                    <p class="mt-4 text-base text-gray-600">Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit.</p>
                </div>
            </div>
        </div>
    </div>
</section>

Related Examples

stepper
The Stepper Component is a versatile and user-friendly tool designed to guide users through a sequence of steps. Whether you're building a multi-step form, a tutorial, or any process that requires sequential navigation, this component makes it easy to implement and customize.

Abhiraj

1 year ago

2.9k
Landi page template
con un cuerpo libre

Raul antonio de la cruz hernandez

9 months ago

915
Dash.OS: Drag & Drop Dashboard Widget System
A fully interactive, freeform dashboard builder for the browser. Drop in widgets, drag them anywhere, resize to fit, and your layout is automatically remembered. Ships with a live Chart.js revenue chart, KPI stats, a task tracker, and a notifications feed, all in a single zero-dependency HTML file with dark/light mode built in.

Ijila Itunu

7 months ago

961
step
html , css

Hacker Development

1 year ago

1.3k
Project stats section

Carlos

2 years ago

2.3k
How It Works Steps
I have made it minimal and added dark mode support

Iris Callahan

1 year ago

1.8k
Tiles for showing stats

Task Master

3 years ago

13.8k
Simple stepper section
multipurpose verticle stepper

S. Patel

3 years ago

11k
How it works
Grids steps on how it works

Olajide Olamide (Laemmy)

6 months ago

733
Showcase Impactfull stats
stats cards with icons

Carlos

1 year ago

2k
AI Trends Showcase
A clean and modern intelligence feed component for showcasing AI, technology, startup, and research updates with automatic rotation, smooth navigation, and responsive layouts. Perfect For Showcase AI, technology, and innovation stories using a premium editorial-style carousel. Designed with a clean dark aesthetic, automatic slide rotation, interactive breadcrumbs, navigation controls, and a responsive layout that works seamlessly across desktop and mobile devices.

Ayyamperumal S

4 months ago

282
Stats Section
The gradient background stats section uses dark shades of gradient change colors according to your website theme

Santiago Hernandez

2 years ago

3.6k