All solutions

Any feedback is welcome. I am unsure if I did best practices in my React code. In one of my React component files, there is more than 110 lines. Maybe I should have broken part of it into another file. Perhaps the styling could have been organized better. I am also unsure in that same file, if I should have found a better way to implement border countries than how I did it.

Should there have been css attribute selectors used in CSS for aria attributes instead of classes which is toggled in js? I could not completely get a match on background blue color after/before pseudo selector although I got as close as I could. Was height percentage along with the rest of the code a good way to get that done (css lines 178-190, 286-297)? I spent a lot of time researching accessibility. I am unsure it was done right in the tabbed system and accordion. Was the error system on the form under the action done correctly? the red around the input sounds like there was a div surrounding it which I did use with display none.

Would it have been ok to include the paragraph under the button in the form tag itself instead of outside necessitating the div?

Unsure if: fixed position was right for logo on desktop view as logo was under header which is on the right side of the screen. Tablet view should be the same as the mobile view. The Tiny hr should be the dot on desktop between login and every other link. Was the image was done correctly responsive wise/does it scale well? Should text align center should be used for under 360 width buttons were styled right width wise and font size wise?

This was a doozy. Javascript involved in suppressing the native error validation message and more to toggle css when a validation error happens.