single-price-grid-component/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
    <link
      href="styles.css"
      type="text/css"
      rel="stylesheet"
    />
    <!-- <link
      href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"
      rel="stylesheet"
    /> -->
  </head>
  <body class="bg-gray-300 tracking-wide leading-6">
    <main
      class="m-auto md:flex md:flex-wrap px-8 py-4 md:px-12 md:py-8 max-w-4xl"
    >
      <section
        class="bg-white p-6 md:px-12 md:py-14 rounded-t-lg lg:w-full shadow-2xl"
      >
        <h1 class="text-teal-500 font-bold text-xl md:text-2xl tracking-wider mb-3 md:mb-6">
          Join our community
        </h1>
        <p class="text-bright_yellow text-sm md:text-xl font-bold mb-4">
          30-day, hassle-free money back guarantee
        </p>
        <p class="text-grayish_blue text-xs md:text-base">
          Gain access to our full library of tutorials along with expert code
          reviews. Perfect for any developers who are serious about honing their
          skills.
        </p>
      </section>
      <section
        class="bg-cyan p-6 md:px-12 md:py-14 text-white md:flex md:flex-col md:justify-between md:w-1/2 md:rounded-bl-lg shadow-2xl"
      >
        <h2 class="font-bold text-lg mb-4 tracking-wider">
          Monthly Subscription
        </h2>
        <p class="flex items-center mb-2">
          <span class="text-white text-3xl font-bold mr-2 mb-2 md:mb-0">$29</span>
          <span class="text-sm font-thin text-light_gray">per month</span>
        </p>
        <p class="mb-8 text-white">Full access for less than $1 a day</p>
        <button class="bg-bright_yellow text-white font-bold w-full shadow-xl hover:shadow-2xl hover:text-light_gray rounded p-4">
          Sign Up
        </button>
      </section>
      <section
        class="bg-cyan_light text-lg p-6 md:px-12 md:py-14 rounded-b-lg md:rounded-none md:rounded-br-lg md:w-1/2 shadow-2xl"
      >
        <h2 class="text-white text-lg font-bold mb-4 tracking-tight">Why Us</h2>
        <ul class="text-sm text-white">
          <li>Tutorials by industry experts</li>
          <li>Peer &amp; expert code review</li>
          <li>Coding exercices</li>
          <li>Access to our GitHub repos</li>
          <li>Community forum</li>
          <li>Flashcard decks</li>
          <li>New videos every week</li>
        </ul>
      </section>
    </main>
  </body>
</html>