QR Code Component with HTML & CSS

This project is visually good and regarding the code I think I could give you some suggestions for improvements:

Text sizes should always be in rem and not in px. This is very important because people enlarge the text in their browser settings. Putting the text size in px may not respect their preferences. If you want to display a 24 px text, to convert it to rem you have to do 24/16 = 1.5. A resource that explains it very well

Then it would be better to separate the css in another file for better clarity. You can name it for example style.css and link it with <link rel="stylesheet" href="style.css"> from the HTML file.

I also saw that you reset default properties in the body and that's good

    body {
      font-family: "Outfit", sans-serif;
      margin: 0;
      padding: 0;
    }

But you can try to target all elements with * like this:

    * {
      font-family: "Outfit", sans-serif;
      margin: 0;
      padding: 0;
    }

With this way of doing you can remove padding and margin of all elements by default on browsers. You can use more advanced CSS reset methods to avoid bugs on different browsers.

I hope this was useful to you, have a nice day.

get rid off the bottom text as that's not in design, card is too high up and needs going down