QR Code Component

Your solution is very elegant and simple. I loved it =)

Here are few suggestions:

* {
    margin:0;
}

Consider putting bellow margin a global parameter of font-size, and then on rest of the classes use rem as font-size matter. Also putting font-family: 'Outfit', sans-serif; would work great here if its only 1 family for whole page.

.text h1 {
    font-weight: bold;
}

Here instead bold you could have used font-weight: 700 (or 600); so it would look same as challenge heading :)

Great solution by the way =)