Edit Profile Page - Copy this React, Tailwind Component to your project
Design a modern and responsive Edit Profile Page with two clearly separate sections. The sections should be visually distinct, each with relevant icons displayed beside the sections for enhanced user understanding and aesthetics. Ensure the page provides a premium user experience with intuitive navigation and a clean layout. 1. Personal Information Section (Top) Section Header: Label this section "Personal Information" with a profile icon placed beside the header (on the left or right side, as per the design preference). Section Divider: Add a horizontal line or a boxed border to visually separate this section from the rest of the page. The line should be subtle but clear. Username: Display the username in a non editable, read only input field. Add a user icon aligned inside the field to the left to indicate this is user specific information. Hostel ID: Display the hostel ID in another non editable, read only input field, with a badge icon inside the field, aligned to the left. Make sure the Personal Information section has sufficient spacing and padding to avoid clutter, creating a spacious and friendly layout. Icon Design: Place a relevant icon (e.g., profile or ID badge) beside the section header, clearly indicating that this section is for personal information. The icons should not blend with the fields but complement the overall design and aid in understanding. 2. Change Password Section (Below Personal Information) Section Header: Label this section "Change Password" and add a lock icon next to the section header (again, aligned to the side of the section, not inside the input fields). Section Divider: Include another horizontal line or boxed border to separate the password section from the personal information section above. Old Password: Input field (type: password) with a lock icon inside the input box, aligned to the left. Include an eye icon for toggling visibility. New Password: Input field (type: password) with a key icon inside the field, aligned to the left. Add an eye icon for toggling visibility. Confirm New Password: Input field (type: password) with a checkmark icon for confirmation, also with an eye icon to toggle visibility. "Change Password" Button: Place the button at the bottom of this section, making it large, easy to locate, and styled with a contrasting color for visibility. Ensure it looks clickable and accessible. Icon Design: Add a lock icon beside the Change Password section header, reinforcing the purpose of this section. Icons should be large enough to be recognizable but not overly large to overwhelm the design. UI and Background Design: Use a soft gradient background with light, calming colors (e.g., light blues or pastel shades) to create a pleasant experience. Ensure there’s a clear visual separation between the two sections using dividers, spacing, or boxed sections to prevent merging. Both sections should be fully responsive, optimized for various screen sizes, from desktops to mobile devices. Icons beside the sections should be consistent in style (minimalist and modern) and used to visually distinguish each section. Maintain ample white space to prevent a cluttered appearance, focusing on creating a clean and organized design.
