Home
Steven Kuhn
Steps section

Steps section

This tailwind example is contributed by Steven Kuhn, on 21-Jan-2023. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example is stepper

Steps

Author Steven Kuhn

9.1k

9

Fork Fullscreen

<ol class="grid gap-8 md:grid-cols-3 p-6">
    <li class="relative bg-gray-50 rounded-xl">
        <div class="p-6 space-y-4">
            <div class="block w-10 h-10 mx-auto -mt-12 rounded-full ring-8 ring-white">
                <div class="w-10 h-10 rounded-full shadow-sm">
                    <div
                        class="flex items-center justify-center w-10 h-10 text-lg font-bold bg-white rounded-full shadow-lg text-primary-600 tabular-nums">
                        1
                    </div>
                </div>
            </div>

<div class="space-y-1">
                <h3 class="text-xl font-bold tracking-tight md:text-2xl">Create a server</h3>

<p class="text-gray-600">
                    Select any of these server providers, or use your own.
                </p>
            </div>

<hr class="border-gray-200 border-dashed">

<ul class="space-y-1 font-medium text-gray-500">
                <li>UpCloud</li>
                <li>Digital Ocean</li>
                <li>Linode</li>
                <li>AWS EC2</li>
                <li>...</li>
            </ul>
        </div>
    </li>

<li class="relative bg-gray-50 rounded-xl">
        <div class="p-6 space-y-4">
            <div class="block w-10 h-10 mx-auto -mt-12 rounded-full ring-8 ring-white">
                <div class="w-10 h-10 rounded-full shadow-sm">
                    <div
                        class="flex items-center justify-center w-10 h-10 text-lg font-bold bg-white rounded-full shadow-lg text-primary-600 tabular-nums">
                        2
                    </div>
                </div>
            </div>

<div class="space-y-1">
                <h3 class="text-xl font-bold tracking-tight md:text-2xl">Connect GIT repository</h3>

<p class="text-gray-600">
                    Connect your GIT repository and let Ploi handle the rest.
                </p>
            </div>

<hr class="border-gray-200 border-dashed">

<ul class="space-y-1 font-medium text-gray-500">
                <li>laravel/laravel</li>
                <li>statamic/statamic</li>
                <li>...</li>
            </ul>
        </div>
    </li>

<li class="relative bg-gray-50 rounded-xl">
        <div class="p-6 space-y-4">
            <div class="block w-10 h-10 mx-auto -mt-12 rounded-full ring-8 ring-white">
                <div class="w-10 h-10 rounded-full shadow-sm">
                    <div
                        class="flex items-center justify-center w-10 h-10 text-lg font-bold bg-white rounded-full shadow-lg text-primary-600 tabular-nums">
                        3
                    </div>
                </div>
            </div>

<div class="space-y-1">
                <h3 class="text-xl font-bold tracking-tight md:text-2xl">Deploy your application
                </h3>

<p class="text-gray-600">
                    Click, deploy and sit back ☕️
                </p>
            </div>

<hr class="border-gray-200 border-dashed">

<ul class="flex flex-col w-full p-4 space-y-1 font-mono text-sm font-medium text-white bg-gray-800 rounded">
                <li>Mon, Apr 26, 2021 11:47 AM</li>
                <li>10 files changed, 13004 insertions(+), 22 deletions(-)</li>
                <li>...</li>
                <li>🚀 Application deployed!</li>
            </ul>
        </div>
    </li>
</ol>

Related Examples

Stepper example
Explain How it works to your audience

Author:
Santos78

2 years ago

13.4k
Tailwind stepper example

Author:
Erik Hyatt

1 year ago

10.4k
Steps block

Author:
Ron Hicks

2 years ago

11.2k
Steps section for explaining process
Step component with a curved line connecting all steps

Author:
Anonymous

1 year ago

8k
Steps section verticle

Author:
Ron Hicks

2 years ago

9.1k
Process Steps Grid
A structured way to present information about each step, along with corresponding icons and descriptions. Each step card is designed with a hover effect.

Author:
Computer guy

1 year ago

10.2k
Stepper block
A full-width steps section

Author:
Ron Hicks

2 years ago

11k
Steps / Service Card

Author:
Anonymous

1 year ago

4.8k
Steps section
Show features or steps of your website. Each step Includes Icons.

Author:
Komal Jain

1 year ago

8.4k
Responsive steps section

Author:
Simon Scheffer

2 years ago

8.5k
Steps section for how it works
Info cards for how does it work section?

Author:
Anonymous

4 months ago

1k
Onboarding steps section

Author:
Prashant

1 year ago

4.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 2100+ components

TailwindFlex.com

Tailwindflex.com is a free Tailwind CSS examples library. It's a one-stop destination for ready-made Tailwind CSS components and templates.

Contact

Email: admin@tailwindflex.com

Resources

Tailwind CSS Gradient Generator Free Bootstrap CSS Components Free CSS Components

© 2025 TailwindFlex. All Rights Reserved.

v1.1