Home
Samuel Abera
Profile Form

Profile Form

Progressive Profile Form

This tailwind example is contributed by Samuel Abera, on 15-Apr-2024. Component is made with Tailwind CSS v3. It is responsive. It supports dark mode. similar terms for this example are Register, Sign in,Author box, User information,stepper

Form Login Form Profile Steps Other

Author Samuel Abera

2.3k

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 xs:gap-0">

<div
                        class="lg:w-[20%] md:w-[30%] xs:w-full bg-gray-100 flex md:flex-col xs:flex-row xs:justify-center 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 xs:bg-blue-500 xs: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 xs:text-md font-semibold dark:text-white cursor-pointer">
                                Step - <h1
                                    class="md:text-3xl xs:text-lg sm:text-white flex justify-center sm:px-2 xs:pr-2 xs: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 xs:text-md font-semibold dark:text-white cursor-pointer">
                                Step - <h1
                                    class="md:text-3xl xs: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 xs:text-md font-semibold dark:text-white cursor-pointer">
                                Step - <h1
                                    class="md:text-3xl xs: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 xs:text-md font-semibold dark:text-white cursor-pointer">
                                Step - <h1
                                    class="md:text-3xl xs:text-lg sm:text-white flex justify-center sm:px-2 sm:bg-blue-500 rounded-lg">
                                    4
                                </h1>
                            </div>
                        </div>
                    </div>

<div class="bg-gray-100 md:w-[88%] xs:w-[92%] 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 xs:px-4 py-2 bg-blue-400 text-white rounded-lg">Previous</button>
                    <button type="submit" class="sm:px-8 xs:px-4 py-2 bg-blue-700 text-white rounded-lg">Next</button>
                </div>
            </div>
            
        </div>
    </div>
</section>

Related Examples