Categories
Html and Tailwind CSS User Profile form code snippet | component
This HTML and Tailwind CSS code snippet showcases a user profile management form designed for easy access and efficient data editing. Divided into two sections, the panel features "Contact Info" and "Change Password" functionalities. The "Contact Info" section includes input fields for the user's phone number and website URL, with relevant icons for visual clarity. On the other hand, the "Change Password" section provides input fields for the old password, new password, and confirm new password, ensuring secure password updates. Both sections follow a grid layout, enhancing readability and usability. The user profile form design prioritizes simplicity and functionality, making it ideal for integration into user account settings interfaces within various web applications.
<div class="sm:p-4 lg:p-11 xl:p-20 2xl:p-52 relative">
<div class="flex justify-center">
<div class="max-w-2xl w-full m-auto p-6">
<!-- Main form details begins here -->
<div class="p-6 rounded-md shadow bg-white mt-[30px]">
<div class="grid lg:grid-cols-2 grid-cols-1 gap-5">
<div>
<h5 class="text-lg font-semibold mb-4">Contact Info :</h5>
<form>
<div class="grid grid-cols-1 gap-5">
<div>
<label class="font-medium">Phone No. :</label>
<div class="relative mt-2">
<i
class="fas fa-phone w-4 h-4 absolute top-3 start-4"
></i>
<input
name="number"
id="number"
type="number"
class="ps-12 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600 focus:ring-0"
placeholder="Phone :"
/>
</div>
</div>
<div>
<label class="font-medium">Website :</label>
<div class="relative mt-2">
<i
class="fas fa-globe w-4 h-4 absolute top-3 start-4"
></i>
<input
name="url"
id="url"
type="url"
class="ps-12 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600 focus:ring-0"
placeholder="Url :"
/>
</div>
</div>
</div>
<!--end grid-->
<button
class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md mt-5"
>
Update
</button>
</form>
</div>
<!--end col-->
<div>
<h5 class="text-lg font-semibold mb-4">Change password :</h5>
<form>
<div class="grid grid-cols-1 gap-5">
<div>
<label class="font-medium">Old password :</label>
<div class="relative mt-2">
<i
class="fas fa-key w-4 h-4 absolute top-3 start-4"
></i>
<input
type="password"
class="ps-12 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600 focus:ring-0"
placeholder="Old password"
required=""
/>
</div>
</div>
<div>
<label class="font-medium">New password :</label>
<div class="relative mt-2">
<i
class="fas fa-key w-4 h-4 absolute top-3 start-4"
></i>
<input
type="password"
class="ps-12 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600 focus:ring-0"
placeholder="New password"
required=""
/>
</div>
</div>
<div>
<label class="font-medium">Confirm New password :</label>
<div class="relative mt-2">
<i
class="fas fa-key w-4 h-4 absolute top-3 start-4"
></i>
<input
type="password"
class="ps-12 w-full py-2 px-3 h-10 bg-transparent rounded outline-none border border-gray-200 focus:border-indigo-600 focus:ring-0"
placeholder="Confirm New password"
required=""
/>
</div>
</div>
</div>
<!--end grid-->
<button
class="py-2 px-5 inline-block font-semibold tracking-wide border align-middle duration-500 text-base text-center bg-indigo-600 hover:bg-indigo-700 border-indigo-600 hover:border-indigo-700 text-white rounded-md mt-5"
>
Save password
</button>
</form>
</div>
<!--end col-->
</div>
<!--end row-->
</div>
<!-- Main form details ends here -->
</div>
</div>
</div>