You have to develop the responsive form components in React Js Bootstrap.
For the password input field, this (The password must contain a Special character, Upper Case, Numeric, and 8 digits) are the validations. If there is any validation missing then the related validation words must highlight in #FF5630 color and if characters meet validation parameters then those words have to highlight in #38CB89 color. If confirm password does not match then show the error message below to it like First Name in the mockup. On-click the eye icon it has to show the password and hide vice-versa. Add animation effect on-click the eye icon.
For pin, it has to highlight in #1E519F if the input field is filled. On load of the first input field must be active with the cursor in it and the same applies to form also. If we enter the backspace key it has to remove the input values respectively, if we enter one number then the cursor has to move to the next input field and vice-versa on remove. Pin must take only numbers.
First Name and Last Name must take only alphabets and numbers else show the error message below the input field as shown in the mockup. The same applies to all input fields.
All input fields are floating labels with eye catchy soft animation.
For the select option, I have given the example image of how should it work.
On the left side, it's slide show images.
Attached mockup file ([login to view URL])