Single price grid component using HTML & CSS

Hey there, this looks great. It loads fast, too. I think you've done a great job here. Here's some thoughts regarding your HTML here for your consideration.

In the following section <div id="sec1">:

<h2>Monthly Subscription</h2>
<h3>$29 per month</h3>
<h3>Full access for less than $1 a day</h3>

You have an <h2> immediately followed by two <h3>'s. While this won't return a validation error, an <h3> or any header element, should be followed by some content—like a paragraph, or list, or tabular data. So, in order to keep the HTML semantically correct, I'd recommend converting those H3's to <p>'s.

You could also consider replacing the <div class="header"> with the HTML5 <header> element. The <main> element could be used to include your two divs, id="sec1" and id="sec2"

So, a structure like

<header>... all your header content </header>
<main>
  <div id="sec1">...</div>
  <div id="sec2">...</div>
</main>
<footer>
  ... all your footer content
</footer>

One recommendation regarding your responsive design:

You may consider using a width and a max width on your container element. For instance:

.container {
  width: 100%;
  max-width: 720px;
}

This will help ensure your content doesn't get cut off when resizing the browser.

I hope this helps. Again, super job. Keep up the fantastic work.