Bootstrapped using create-react-app and used tailwind for styling

thanks @juveria and @raymart for the suggestions, updated the code to reflect the same. didnt really think much over the alt for "music icon", gonna call it "music" instead. about the "change" text being an a-tag, i don't really like the idea to put a-tag without a proper href in there (dont like the "#" a-tags) so instead kept it as button. given a more detail requirement on what these buttons would do in a real world app, the tag could be changed to reflect it.

Hey, awesome job on this one. Layout in general looks good.

Some suggestions would be:

• The img for the vector image should have used alt="" on it, since the image is just only a decorative one.
• Like what Juveria said, always have an h1 element on a webpage. Also, when using heading tags, make sure that if you use heading tag, like h3, the h1, h2 must be present before it as well, not skipping any level.
• The music icon image should be using alt="" as well. Also, when using alt attribute, avoid adding words that relates to "graphic" like "icon, image, logo.." it is already an image, no need to describe it as one.
• annual plan could use a heading tag.
• For this one, I would use anchor tags a not button, since this is not a form and it looks like it doesn't have any popups/modal that button controls.

Aside from those, looks great and great job on this.

Use h1 tag for order summary and also try using semantic tags😊👍🏻click here