QR code component

The code looks very nice to me!

I'm not sure about using <h3> for the text, since you haven't used any <h1> or <h2> on the page and you shouldn't use tags that have a meaning for decorational purposes instead of adding extra css.

And the margin: -50% doesn't seem to have any effect.

You don't necessarily need to put your <img> inside a <div>. The <img> has by default a display value of inline, so it won't respond to width or height properties, but you can change that behaviour with 'display: block;' so it will act just like a <div>.

The combination of absolute position and translation seems quite nice to me, i will definitely keep that in mind as a way to center an element. An alternative way, if your body has only one child, is to give 'height:100vh', 'display:grid', 'place-items:center' and the child is centered!

Well done - close to the design. To fix the accessibility issues you need to add a <main></main> landmark

<main>
    <div class="container">
        ....
    </div>
 </main>