Steps section for form

with short description

This tailwind example is contributed by Yuni saputara, on 30-May-2024. Component is made with Tailwind v3.4. It is responsive. similar terms for this example is stepper

Steps

Author Yuni saputara

Tailwind v3.4 3.1k 6

Fork Fullscreen

<div class="mb-10">
    <nav aria-label="Progress">
        <ol role="list" class="space-y-4 md:flex md:space-x-8 md:space-y-0">
            <li class="md:flex-1">
                <div class="group cursor-pointer flex flex-col py-2 pl-4 md:pb-0 md:pl-0 md:pt-4 border-l-4 border-indigo-600 md:border-l-0 md:border-t-4"
                    aria-current="step">
                    <span class="text-sm font-medium text-indigo-600">Step 1</span><span class="text-sm font-medium">Personal Details</span>
                </div>
            </li>
            <li class="md:flex-1">
                <div
                    class="group cursor-pointer flex flex-col py-2 pl-4 md:pb-0 md:pl-0 md:pt-4 border-l-4 border-gray-200 hover:border-gray-300 md:border-l-0 md:border-t-4">
                    <span class="text-sm font-medium text-gray-500 group-hover:text-gray-700">Step 2</span><span class="text-sm font-medium">Skin Profile</span>
                </div>
            </li>
            <li class="md:flex-1">
                <div
                    class="group cursor-pointer flex flex-col py-2 pl-4 md:pb-0 md:pl-0 md:pt-4 border-l-4 border-gray-200 hover:border-gray-300 md:border-l-0 md:border-t-4">
                    <span class="text-sm font-medium text-gray-500 group-hover:text-gray-700">Step 3</span><span class="text-sm font-medium">Current Routine (optional)</span>
                </div>
            </li>
        </ol>
    </nav>
</div>

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
List of steps

Leif99

3 years ago

13.9k
Shoping form steps

Carlos

2 years ago

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

3 years ago

12k
step
html , css

Hacker Development

1 year ago

1.3k
Responsive steps section

Simon Scheffer

3 years ago

10.2k
Steps section verticle

Ron Hicks

3 years ago

10.5k
Steps / Service Card

Anonymous

2 years ago

6.8k
How It Works Steps

EliteAI Tools

1 year ago

1.8k
Stepper block
A full-width steps section

Ron Hicks

3 years ago

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

Iris Callahan

1 year ago

1.8k