QR code component using Tailwind CSS

Hi, I hope this feedback is helpful:

1. You have an extra div wrapping main that can be removed.
2. The component itself should not use the main landmark, that should wrap around it. Use a div inside main for the card component classes.
3. The component must not have a height (essential change!). This is really important to grasp. Let the browser do it's job and decide what height is needed based on the content inside.
4. The component should not have a width either. Change this to min-width and make sure it is in rem not px so it can scale correctly for users who have a different default text size.
5. The alt description needs improvement. It needs to say what this image is (QR code) and where it goes (to FrontendMentor.io).
6. Remove all articles from the component. That is not how to use them at all. The whole component could be an article or section if you want but there is no real benefit here to doing that, and it's definitely not correct to use articles inside the component.
7. The image and the text actually don't need wrapping in any extra elements at all.
8. Font size must never be in px. Extremely important.
9. The card itself should have padding. The child elements within it should have margin. Make sure you understand the difference (there is a post about this on FEDmentor.dev too).
10. Remember this is a single card component and think about the context of where/how this would be used. This would never act as a page title, which tells you it should not have a h1. Use a h2 instead.
11. Make sure the component can't hit screen edges. Either give the body a little padding on this or give the component a little margin (on all sides).