Home
$@(\/)(\/)¥
Profile Stepper Form

Profile Stepper Form

Progressive Profile Form

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

Form Steps

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

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

4.9k

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.

Author:
Abhiraj

1 year ago

1.7k
Checkout form

Author:
Sienna

3 years ago

14k
Made a sinup form
Made a sinnup form

Author:
Sufyan jutt

3 weeks ago

181
damatebis forma

Author:
Tamaz gogitidze

1 year ago

2.1k
WYSIWYG Editor Form
Form with CKEditor

Author:
I.P. Leroy

2 years ago

15.8k
Feedback Form
Feedback Form with a map

Author:
Andreas Wagner

2 years ago

8.6k
Tailwind CSS Radio Button Cards

Author:
Prashant

3 years ago

12.7k
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

3.5k
Contact us section
Minimal contact us form

Author:
Geoffrey Callaghan

2 years ago

5.6k
Responsive Classes List Table with Edit and Delete buttons using Tailwind CSS
This responsive classes list table is built using Tailwind CSS and features: - A clean layout with a header displaying column titles. - Action buttons for editing and deleting entries. - Responsive design that adapts to various screen sizes. - Easy customization options to fit your project's needs.

Author:
Anum Shahana

1 year ago

3.3k
Glassmorphism form

Author:
Geoffrey Callaghan

2 years ago

6.8k
Credit / Debit card payment information form

Author:
Santos78

2 years ago

19.8k

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components