Login Form Component - Copy this Angular, Tailwind Component to your project
Generate login and signup forms for a personal finance management application using Angular and Tailwind CSS. Both forms should share a modern, clean, and responsive design. 1. **Login Form**: Fields: Email: required, must be in a valid email format. Password: required. Main button: "Login". Footer message: "Don't have an account? Sign up here." with a link to the signup form. 2. **Signup Form**: Fields: Username: required, minimum 3 characters. Email: required, must be in a valid email format. Password: required, at least 8 characters long, including one uppercase letter, one lowercase letter, one number, and one special character. Main button: "Sign Up". Footer message: "Already have an account? Login here." with a link to the login form. **Design**: Use Tailwind CSS for styling with predefined classes: Centered forms with a card layout. Fields with rounded borders and focus effects. Buttons with vibrant colors and hover effects. Forms should be displayed inside cards with rounded corners and shadows. **Code Structure**: Angular (HTML, TypeScript). Each form should be in its own component: `LoginComponent` and `SignupComponent`. Components must include navigation links using `routerLink` between forms. **Validations**: Basic form validations: Show error messages under each field when validation rules are not met. **Extras**: The design must be fully responsive and look good on both mobile and desktop devices.
