User Edit Form - Copy this Angular, Tailwind Component to your project

Design a responsive user edit form UI for a system where users can have one or more roles. The system has the following requirements: Roles: There are 4 roles (e.g., Admin, Editor, Viewer, Manager). Each role has a predefined list of form fields, with some fields overlapping across roles. Multiple Roles: Users can have multiple roles. If a user has multiple roles, the form should: Display a dropdown or tab-based interface that allows the user to select the role they want to edit. Dynamically update the form fields based on the selected role. Provide an option to display fields for all roles at once, if needed, merging fields intelligently (e.g., no duplicates, showing required/optional status for each role). Role-Specific Fields: When a single role is selected, show only the fields relevant to that role. When "All Roles" is selected, show all fields grouped by role or with clear indicators for which role(s) each field belongs to. Usability: Include visual cues (e.g., icons, colors, or badges) to differentiate between role-specific fields. Make navigation seamless between roles, with a clear indication of which role is being edited. Provide tooltips or inline help for fields that are shared across roles to clarify why they are included. Validation and Submission: Allow users to save role-specific edits without affecting fields for other roles. Include inline validation for all fields based on their role-specific requirements. Accessibility and Responsiveness: The UI must be accessible (WCAG-compliant) and responsive, functioning well on both desktop and mobile devices. Technical Note: Assume the form fields are provided as JSON data with structure: { role: string, fields: [{ name: string, type: string, required: boolean }] }.