Account Settings Form - Copy this Html, Tailwind Component to your project

I am working on a Vue.js form for user account settings that requires improved visual appeal and user experience. I would like the form to have a modern, clean design with responsive and interactive elements, similar to UI standards seen in high end platforms like Nike or Shein. Key Enhancements: Overall Layout: The form should have a clean, spacious layout with balanced margins and padding. Use a soft gray background for the page with a white container to create a clear contrast and hierarchy. Add shadow effects to inputs, buttons, and containers for a more dynamic and professional appearance. Form Fields: Each form field (input, select, textarea) should have a soft border, with a focus effect that includes an indigo border and shadow ring to highlight user interaction. Input padding should be increased for a more spacious and comfortable typing experience. Buttons: Buttons should have a strong primary color (indigo) with smooth hover effects, including a slightly darker shade on hover. The submit button should be bold, with large padding and rounded corners, creating a clear call to action. Modal Design: The modal for changing the password should have a semi transparent dark overlay to focus attention on the modal content. Modal inputs should maintain the same form field styles, with added focus effects to enhance user interaction. Include smooth fade in/out animations when the modal opens and closes. Typography: Headings should be bold and clearly differentiated from the body text, with color contrast to improve readability. Use modern font weights and sizes to ensure good legibility and create a visual hierarchy. Interaction Details: The form should provide real time feedback for user interaction, such as changing border colors when fields are focused. Buttons should have hover transitions for smoother interactions. The modal should be easily dismissible, with clear cancel and confirm buttons to manage the user flow.