All solutions

This is my first page using Tailwind CSS. At the beginning it was a bit difficult to understand how it works, especially if you like to customise every margin, padding, etc., but later you realize that it is a quick and efficient way to set up a webpage, even if the result is not pixel perfect

For me, the most difficult part was the form validation using Javascript (I did not use the HTML form validation API as the pop-ups which are displayed are really ugly and I did not manage to modify them...) If anyone knows an alternative for this it would be much appreciated

Also, I used javascript to add 1 space between each 4 numbers in the card number. After reviewing many solutions I took the one which I considered as the best one, but I see that it is not always working (especially if you type very fast) Any idea here would also be much welcomed

Thanks !

I find difficult to set the background image in the correct position and make it responsive

What do you think of this design ? Any improvement ?

Good exercise to learn how to ask an API and parse a JSON response

In desktop screen, I have had to reduce the size of the bottom row to 47% (top row set to 50%) to avoid a large bottom padding. Not sure if there is another way to do it...

Hi,

For the validation of the form values I have created a container for the icon and error message and set the display to "none". Then, when button is clicked, if the data are invalid, I set the display of that container to "block" Not sure if this is the best way to proceed for this validation

Any other idea? Thanks !

Anyone knows how to include the borders just in the corners ? In the design files it seems there are some borders in the corners of the cards which show the results

Thanks !

What is the best way to customize the appearance of a radio button ? (or other elements in a form) I have put "appearance:none", and then I have created all the styles, but not sure if this is the recommended way... Thanks !

Which is the best approach to follow to set the margins between paragraphs and titles ?

1. Set a border-bottom to every element ?; or
2. Set a border-top and a border-bottom to the central element and then set the rest of margins for the other elements ?

Which properties should be set in "rem" and which ones in "px" ? Do we only use "rem" for properties related to html font-size ? What about width/height for an img, borders, margin, etc.

Thanks !