Credit card form using plain JS and Tailwind CSS

Hi Victor, how are you?

I really liked the result of your project, but I have some tips that I think you will enjoy:

• images must have alt text unless it is a decorative image, for any decorative image each IMG tag must have empty alt="" and add aria-hidden="true" attributes to make all the assistive technologies of the Web, as screen reader. Learn the differences between decorative/meaningless images vs important content.
• Consider using rem for font size .If your web content font sizes are set in absolute units, such as pixels, the user will not be able to re-size the text or control the font size based on their needs. Relative units “stretch” according to the screen size and/or user’s preferred font size, and work on a large range of devices.

The rest is great!

I hope it helps... 👍

Hello,

For errors I used a paragraph below the inputs with position: absolute (in this way the content do not moves when it's displayed) and display:none to hide it, after that you can use an IF statemant with a condition, for exemple (cardholdername.length < 10) and change the css display if it's true. In this way you don't need to worry about the margin topic. Take a look at mine solution for this challange. https://www.frontendmentor.io/solutions/clean-css-and-vanila-javascript-rkqzzWVs9t

Have a nice day and enjoy!