Responsive qr component using CSS Flexbox

This looks great. The only way to get better is practice.

I noticed you explicitly defined the card width. I'd suggest you use more or implicit or relative units like %.

So instead of:

.main-content  {
   width: 315px 
}

You could do :

.main-content  {
   width: 90%
   max-width: 315px
}

This way, the card is responsive on small screens but does not exceed 315px. So it still looks good on bigger screens. (that's if you're taking the mobile-first approach)

But nice job still 🚀

Nice work ! i suggest to :

• Use rem unit rather then px go here for more..

.main-content  {
            width: min(350px, 90%);
         } 

• Give a Class to every element in HTML ans use (BEM méthodologie for naming classes)[https://getbem.com/introduction/]

Enjoy coding