Create a simple page with a form for registration based on requirements and design specified in this task.

Requirements

• Styling in TailwindCSS framework
• If you are familiar with TypeScript, you can use it.

Functionality

• Form with 4 input fields
  • email
  • username (Username is generated from the email - string before the @)
  • password1
  • password2

Validations

• Email field is required
• Password1 field is required
• Password2 field is required
• Maximum length of the username is 12 characters
• Password1 and password2 should be the same
• Password requirements
  • At least 8 characters
  • At least 1 uppercase and 1 lowercase letter
  • At least 1 special character
  • It is possible to show and hide my password in both password fields

After form submission show alert with submitted data in JSON

Design

• Form should be located in the middle of the screen horizontally and vertically
• Every field on a separate row.
• Max width of the field should be 2/5 of the screen size
• Button is the last form element below the form
• Design of the validation and input fields including success/error states

Basic design of the input with all states

Design of the submit button including all states