Steps section

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

Steps

Author Steven Kuhn

Tailwind v3.4 10.6k 10

Fork Fullscreen

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

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

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

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

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

<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

Santos78

3 years ago

15.8k
Tailwind stepper example

Erik Hyatt

3 years ago

11.9k
Steps block

Ron Hicks

3 years ago

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

Anonymous

2 years ago

10.7k
Steps section verticle

Ron Hicks

3 years ago

10.5k
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.

Computer guy

2 years ago

12k
Stepper block
A full-width steps section

Ron Hicks

3 years ago

13k
Steps / Service Card

Anonymous

2 years ago

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

Komal Jain

2 years ago

10.4k
Responsive steps section

Simon Scheffer

3 years ago

10.2k
How it works section with steps
big and bold how it works section with steps

Carlos

1 year ago

3.7k
Steps for complex forms

Ron Hicks

4 years ago

12.4k