Interactive Card Details Form [NextJS, Tailwind]

Hey, I like your solution for this challenge.

When I was reading your feedback, I was like 'hell yeah, thats exactly what i was struggling with'. It took me hours and hours before I placed the cards and its contents correctly. I think the biggest difficulty in this challenge, is to correctly use 'position: absolute' don't you think?

The way I've done this challenge with a satisfactory result, was to divide the main content (cards, form) into equal containers with use of 'display: grid' layout. Then I positioned the cards with 'top, left' in 'position: absolute' properties. It made them look reasonably big and then I started to style the form.

The next step was to create a media query, to display the containers vertically. I was struggling with the size of those cards, so I've used 'transform: scale()' property which helped me tremendously.

I would also suggest you, to try making the red popups appear on 'outfocus' event. In my opinion it is more friendly for the user if he knows instantly that the input is wrong.

I like that your solution helps the user with card number input by adding the space on its own. I wanted to see how you've made it but unfortunately I cannot see your code. Looks like you had to incorrectly paste the link to the repository.

Anyway, you've done a pretty good job with the project and if you had any more questions don't be afraid to ask, you can also check out my solution for this challenge. Good luck and keep up the good work! :)