QR code component

Hello.

You have created a good design, but which can be improved considering the following.

Use Flex and remove the default html styles, to avoid the default white borders. Consider using the following CSS code, to better align your card.

html, body {
    height: 100vh;
    display: flex;
    justify-content: center; 
    align-items: center; 
    margin: 0; 
}

This CSS code does not use “position: absolute;” which prevents the content from being correctly centered and aligned, this is why I recommend using flexbox.

.main {
    display: flex;
    justify-content: center;
    align-items: center;
}