Product card component with flexbox

Some HTML tips

• Instead of using span, you can use em and s. The <em> tag is used to define emphasized text. The <s> tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it. em for emphasis and s for strikethrough
• You can use the tag <main> instead of the div with the "main" class
• You can use h1 for the title and h2 for subtitle.

Some CSS tips

• You can add some effects to the button like....

button:hover {
     transform: scaleY(1.1);
}

and...

button {
    cursor: pointer;
    transition: 150ms;
}