QR Code Component Using HTML & CSS

bro reduce the size as you can see also focus on it, you may find issues

👾Hello David, congratulations for your solution!

I've inspected your code to understand why the container was so big and I did some fixes for you.

1.Use the property box-sizing: border-box; inside the body to work better the padding and don't lose time calculating the container size + padding.

1.The card container was so big due the height: 850px. I've removed to some unnecessary properties and you can see the code below:

.container {
    max-width: 350px;
    /* border: 1px white solid; */
    background: white;
    /* margin: 40px auto auto auto; */
    /* height: 850px; */
    border-radius: 16px;
}

Here's some fixes also with the qr code image, to deal better with the image, use display: block; and max-width: 100%; this way the image will have the container size.

img {
    display: block;
    /* margin: 15px auto 40px auto; */
    max-width: 100%;
    border-radius: 12px;
    /* padding: 16px; */
}

Hope it helps and keep it up!