step

html , css

This tailwind example is contributed by Hacker Development, on 08-May-2025. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example is stepper

Steps

Author Hacker Development

Fork Fullscreen

<h1
                    class="text-2xl font-semibold p-4 bg-gray-200 shadow-lg dark:bg-gray-800 dark:text-white rounded-sm">
                    Profile</h1>

<div class="w-full md:flex sm:gap-2 gap-0">

<div
                        class="lg:w-[20%] md:w-[30%] w-full mx-auto bg-gray-100 flex md:flex-col flex-row justify-around sm:gap-2 dark:bg-gray-700">
                        <div
                            class="text-gray-900 rounded-sm py-2 sm:bg-gray-400 sm:dark:bg-gray-500 bg-blue-500 dark:bg-blue-500 border-b-2 border-gray-200  dark:border-b-2 dark:border-gray-600 pl-4 hover:bg-gray-400 hover:text-white hover:dark:bg-gray-500">
                            <div
                                class="flex md:gap-2 sm:text-xl text-md font-semibold dark:text-white cursor-pointer">
                                Step - <h1
                                    class="md:text-3xl text-lg sm:text-white flex justify-center sm:px-2 pr-2 bg-blue-500 rounded-lg">
                                    1.
                                </h1>
                            </div>
                        </div>
                        <div
                            class="rounded-sm py-2 border-b-2 border-gray-200 dark:border-b-2 dark:border-gray-600 pl-4 hover:bg-gray-400 hover:text-white hover:dark:bg-gray-500">
                            <div
                                class="flex md:gap-2 sm:text-xl text-md font-semibold dark:text-white cursor-pointer">
                                Step - <h1
                                    class="md:text-3xl text-lg sm:text-white flex justify-center sm:px-2 sm:bg-blue-500 rounded-lg">
                                    2.
                                </h1>
                            </div>
                        </div>
                        <div
                            class="rounded-sm py-2 border-b-2 border-gray-200 dark:border-b-2 dark:border-gray-600 pl-4 hover:bg-gray-400 hover:text-white hover:dark:bg-gray-500">
                            <div
                                class="flex md:gap-2 sm:text-xl text-md font-semibold dark:text-white cursor-pointer">
                                Step - <h1
                                    class="md:text-3xl text-lg sm:text-white flex justify-center sm:px-2 sm:bg-blue-500 rounded-lg">
                                    3.
                                </h1>
                            </div>
                        </div>
                        <div
                            class="rounded-sm py-2 border-b-2 border-gray-200 dark:border-b-2 dark:border-gray-600 pl-4 hover:bg-gray-400 hover:text-white hover:dark:bg-gray-500">
                            <div
                                class="flex md:gap-2 sm:text-xl text-md font-semibold dark:text-white cursor-pointer">
                                Step - <h1
                                    class="md:text-3xl text-lg sm:text-white flex justify-center px-2 sm:bg-blue-500 rounded-lg">
                                    4.
                                </h1>
                            </div>
                        </div>
                    </div>

<div class="bg-gray-100 dark:bg-gray-800 w-full px-4 py-6">

<div class="w-full">
                            <label for="first_name"
                                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">First Name
                                        </label>
                            <input type="text" name="first_name" id="first_name"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            required>
                        </div>
                        
                        <div class="w-full">
                            <label for="last_name"
                                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Last Name
                                        </label>
                            <input type="text" name="last_name" id="last_name"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            required>
                        </div>

<div class="w-full">
                            <label for="email"
                                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Email
                                        </label>
                            <input type="email" name="email" id="email"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            required>
                        </div>

<div class="w-full">
                            <label for="phone_no"
                                            class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Phone Number
                                        </label>
                            <input type="email" name="phone_no" id="phone_no"
                                            class="bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
                                            required>
                        </div>

</div>

</div>

<div class="w-full flex justify-between p-2 bg-gray-200 dark:bg-gray-800">
                    <button class="sm:px-8 px-4 py-2 bg-blue-400 text-white rounded-lg">Previous</button>
                    <button type="submit" class="sm:px-8 px-4 py-2 bg-blue-700 text-white rounded-lg">Next</button>
                </div>
            </div>
            
        </div>
    </div>
</section>

Related Examples

Onboarding steps section

Author:
Prashant

1 year ago

5.4k
How does it work?

Author:
Abdul Baset Bappy

3 days ago

6
Simple stepper section
multipurpose verticle stepper

Author:
S. Patel

2 years ago

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

Author:
Komal Jain

1 year ago

8.8k
Steps section

Author:
Steven Kuhn

2 years ago

9.3k
Profile Stepper Form
Progressive Profile Form

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

1 year ago

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

4 months ago

947
Responsive steps section

Author:
Simon Scheffer

2 years ago

8.8k
Loading Stepper

Author:
Cristian

5 months ago

721
Clean How to Use Section
Minimal how to use guide section

Author:
ReddRadar.com

4 weeks ago

57
How It Works Steps

Author:
EliteAI Tools

5 months ago

580
Steps / Service Card

Author:
Anonymous

1 year ago

5.4k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components