Home
Yuni saputara
Steps section for form

Steps section for form

with short description

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

Steps

Author Yuni saputara

2.4k

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

Shoping form steps

Author:
Carlos

1 year ago

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

Author:
Anonymous

1 year ago

1.7k
Profile Stepper Form
Progressive Profile Form

$$@(\/)(\/)¥$ Author:
$@(\/)(\/)¥

1 year ago

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

Author:
Anonymous

2 years ago

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

Author:
Abhiraj

1 year ago

1.6k
Steps for complex forms

Author:
Ron Hicks

3 years ago

11.6k
Steps section

Author:
Steven Kuhn

3 years ago

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

Author:
Carlos

1 year ago

2.8k
Steps section verticle

Author:
Ron Hicks

3 years ago

9.8k
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

10.3k
Tailwind stepper example

Author:
Erik Hyatt

2 years ago

11.3k
step
html , css

Author:
Hacker Development

8 months ago

453

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components