Pricing Plan inspired by CloudFlare - Tailwind Template

<div class="py-20 bg-white h-screen">
  <div class="flex flex-col sm:flex-row md:items-center justify-center items-stretch gap-20 sm:gap-5 md:gap-0">
    <div class="sm:border-green-300 sm:border md:rounded-3xl flex items-center flex-col gap-4 sm:gap-2 sm:p-5 md:px-16 md:py-20 md:shadow-lg">
      <h2 class="text-4xl font-bold">Free</h2>
      <h3 class="text-2xl font-bold">$0</h3>
      <ul>
        <li>1 build at a time</li>
        <li>500 build per month</li>
        <li>Unlimited Request</li>
        <li>Unlimited Bandwith</li>
        <li>Unlimited Cry</li>
      </ul>
      <div class="pt-2">
        <button class="text-white shadow-lg hover:opacity-75 bg-gradient-to-r from-green-600 to-green-400 p-4 px-6 rounded-xl text-lg">Sign Up</button>
      </div>
    </div>

    <div class="sm:border-green-300 sm:border md:border-l-0 flex items-center flex-col gap-4 sm:gap-2 sm:p-5 md:px-16 md:py-10">
      <h2 class="text-4xl font-bold">Pro</h2>
      <h3 class="text-2xl font-bold">$15</h3>
      <ul>
        <li>1 build at a time</li>
        <li>500 build per month</li>
        <li>Unlimited Request</li>
        <li>Unlimited Bandwith</li>
        <li>Unlimited Cry</li>
      </ul>
      <div class="pt-2">
        <button class="hover:opacity-75 text-green-600 bg-green-100 p-4 px-6 rounded-xl text-lg">Sign Up</button>
      </div>
    </div>
    <div class="sm:border-green-300 sm:border md:border-l-0 rounded-3xl rounded-l-none flex items-center flex-col gap-4 sm:gap-2  sm:p-5 md:px-16 md:py-10">
      <h2 class="text-4xl font-bold">Hero</h2>
      <h3 class="text-2xl font-bold">$30</h3>
      <ul>
        <li>1 build at a time</li>
        <li>500 build per month</li>
        <li>Unlimited Request</li>
        <li>Unlimited Bandwith</li>
        <li>Unlimited Cry</li>
      </ul>
      <div class="pt-2">
        <button class="hover:opacity-75 text-green-600 bg-green-100 p-4 px-6 rounded-xl text-lg">Sign Up</button>
      </div>
    </div>
  </div>
</div>

<style>
    ul li {
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 68"><path fill="%231d1f20" d="M 13 39 h -10 l -1.66 -3.12 l 23 -34 l 3.62 1.5 l -4.54 23.62 h 13.58 l 1.68 3.09 l -22 34 l -3.66 -1.4 l 3.65 -23.69 z"/></svg>') no-repeat;
      background-size: auto;
      background-size: 1.5em 1.5em;
      padding-left: 2em;
  }
</style>