Profile Stepper Form

Progressive Profile Form

This tailwind example is contributed by $@(\/)(\/)¥, on 15-Apr-2024. Component is made with Tailwind v3.4. It is responsive. It supports dark mode. similar terms for this example is stepper

Form Steps

$$@(\/)(\/)¥ profile image$

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

Tailwind v3.4 5.6k 8

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

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.

Abhiraj

1 year ago

2.9k
Responsive Multi-Step Registration Form with Progress Stepper

JUGENDRA GANGWAR

2 months ago

112
Responsive Contact Form with TailwindCSS
A sleek and fully responsive contact form built with TailwindCSS. This form includes input fields for name, email, subject, and message, along with a stylish submit button. The design features a decorative background, smooth focus effects, and optimized mobile responsiveness.

SHARIFUL ISLAM

1 year ago

2k
Neo-Brutalist Login Form

JUGENDRA GANGWAR

3 days ago

5
Steps section for form
with short description

Yuni saputara

2 years ago

3.1k
progress-bar with Tailwind CSS and Alpinejs

Quêmia

2 years ago

2.4k
Contact us section
Minimal contact us form

Geoffrey Callaghan

2 years ago

6.1k
OTPverification

Ratikanta Pradhan

1 year ago

1.1k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript uses fabform.io

Ti To

2 years ago

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

Iris Callahan

1 year ago

1.8k
popup modal contact form
Working modal popup contact form in tailwind CSS Simple snippet for creating a popup contact form with tailwind and javascript

Ti To

2 years ago

8.9k
3D login form and responsive designe
Made a resposnvie form and 3d animation

Sufyan jutt

8 months ago

519