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
tailwind contact form
tailwind contact form

Author:
Geoffrey Callaghan

1 year ago

2.3k
LOGIN TEMPLATE
it is a login template

Author:
Sergio Gonzalez

7 months ago

760
Responsive Form

Author:
ABDO-SY

11 months ago

1.1k
Registration Form
Color Updates: - Changed gradient background to `from-indigo-800 to-blue-900` - Updated text colors to `text-indigo-800` and `text-indigo-900` - Changed button colors to match the new theme - Updated focus rings to use indigo colors Enhanced Styling: - Added smooth transitions with `transition-all duration-300` - Improved shadow with `shadow-2xl` - Added hover scale effect on button - Increased border radius to `rounded-xl` - Added fade-in animation for the form Improved Validation: - Added visual feedback for invalid fields - Added input event listeners to clear error states - Added trim() to username and email validation - Added form reset after successful submission Accessibility Improvements: - Maintained proper contrast ratios - Kept focus states visible - Added proper spacing for better readability - Ensured all interactive elements are properly styled Added Interactions: - Smooth hover transitions - Scale animation on button hover - Immediate feedback on input - Clear error messaging

Author:
nejaa badr

1 year ago

2.7k
Steps section for form
with short description

Author:
Yuni saputara

1 year ago

2.4k
Clean How to Use Section
Minimal how to use guide section

Author:
ReddRadar.com

8 months ago

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

Author:
Anonymous

2 years ago

9.8k
Banner with Form

Author:
Aitrik Saha

1 year ago

1.4k
animation login form
An animated login form enhances the user experience by making the interaction visually engaging and modern. Below is a breakdown of key animation techniques used in animated login forms, plus examples you can use or customize.

Author:
Nicole Shalom

8 months ago

1.1k
YouTube Community Post UI Mockup
A static HTML and Tailwind CSS component mimicking the user interface of a YouTube Community Post. This mockup features the channel header (avatar, name, verified badge, timestamp), post content (text and optional media), engagement actions (Like, Dislike, Comment, Share with counts), and the 'Add a comment' section. It's designed to be responsive, supports YouTube's light and dark themes via custom styling, and uses accurate iconography.

Author:
Hamza Atig

9 months ago

961
Animated Iogin form
This section showcases a series of interactive image cards that reveal descriptive text on hover. Built using Tailwind CSS and Astro.js, each card features a smooth animation, background blur, and opacity transition, enhancing the user experience while presenting visually engaging content.

Author:
nicoleshal07

8 months ago

563

Explore components by Tags

Didn't find component you were looking for?

Search from 3000+ components