Profile Form

Profile form for taking user inputs

This tailwind example is contributed by TailwindFlex, on 23-Aug-2022. Component is made with Tailwind v3.4. It is responsive. It supports dark mode.

Form Input

Author TailwindFlex

Tailwind v3.4 15.4k 11

Fork Fullscreen

<div class="flex justify-center mt-20 px-8">
    <form class="max-w-2xl">
        <div class="flex flex-wrap border shadow rounded-lg p-3 dark:bg-gray-600">
            <h2 class="text-xl text-gray-600 dark:text-gray-300 pb-2">Account settings:</h2>

<div>
                    <label class="text-gray-600 dark:text-gray-400">Email</label>
                    <input
                        class="w-full py-3 border border-slate-200 rounded-lg px-3 focus:outline-none focus:border-slate-500 hover:shadow dark:bg-gray-600 dark:text-gray-100"
                        type="text">
                </div>

<div>
                    <label class="text-gray-600 dark:text-gray-400">Bio</label>
                    <textarea
                        class="w-full py-3 border border-slate-200 rounded-lg px-3 focus:outline-none focus:border-slate-500 hover:shadow dark:bg-gray-600 dark:text-gray-100"
                        name="bio"></textarea>
                </div>
                <div class="flex justify-end">
                    <button
                        class="py-1.5 px-3 m-1 text-center bg-violet-700 border rounded-md text-white  hover:bg-violet-500 hover:text-gray-100 dark:text-gray-200 dark:bg-violet-700"
                        type="submit">Save changes</button>
                </div>
            </div>
        </div>
    </form>
</div>