Registration Page - Copy this React, Tailwind Component to your project
"Design a visually appealing and user friendly registration page with the following features: Three Input Fields: Username: Accepts only alphanumeric characters (a z, A Z, 0 9), must be between 3 15 characters long, and display an error if the criteria are not met. Email Address: Validates standard email format (e.g., user@example.com) and shows an error message for invalid inputs. Password: Must be at least 8 characters long, contain at least one uppercase letter, one lowercase letter, one number, and one special character. Provide password strength feedback to the user. Real Time Validation: Each input field should validate in real time as the user types, providing immediate feedback about errors or success. Submit Button: Only becomes active when all fields pass validation. Upon submission, display a success message or relevant error feedback if validation fails. Styling: Ensure the page has a clean, modern design with responsive layout. Use appropriate icons next to input fields (e.g., a person icon for the username, an envelope for email, and a lock for password). Highlight invalid fields with a red border and show a corresponding error message below the field. User Experience: Allow users to toggle password visibility (e.g., with an eye icon). Include helpful placeholder text in the input fields (e.g., 'Enter your username'). Ensure accessibility (e.g., proper labels for screen readers).
