pricing4

<section>
  <div class="container py-24">
    <div class="flex flex-wrap items-start justify-center w-full gap-4 px-5 mx-auto lg:px-0">
      <div class="w-full xl:w-1/3 lg:w-2/6 md:text-center lg:text-left">
        <div class="flex flex-col p-8 lg:p-0">
          <strong class="mb-1 text-xs font-semibold tracking-widest text-blue-500 uppercase"> Safe payments with Gumroad
          </strong>
          <span class="mb-8 text-2xl font-bold text-gray-600 tracking-wide lg:text-5xl"> Pricing </span>
          <p class="mx-auto mb-4 text-xl font-light text-gray-500 text-opacity-70 lg:pr-10">Use the free templates with
            your whole team or choose a premium.</p>
          <p class="mx-auto mb-2 text-xl font-light text-gray-500 text-opacity-70 lg:pr-10">Get the bundle and get
            lifetime support and one year updates.</p>
        </div>
      </div>
      <div class="w-full xl:w-1/4 md:w-2/6">
        <div class="relative flex flex-col h-full p-8 bg-gray-50 rounded-xl hover:border-white">
          <span class="mb-4 text-base font-medium tracking-widest text-gray-600 uppercase"> Starter </span>
          <span class="flex items-center mb-8 text-base font-medium tracking-tight text-gray-600"> Try and decide.
          </span>
          <div class="flex items-end text-3xl font-black leading-none text-gray-600 lg:text-4xl">
            <span>$0 </span>
          </div>
          <ul>
            <li class="flex items-center mt-8 mb-2 text-base font-medium tracking-tight text-gray-600">
              <span class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-gray-600">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </span>
              <strong>2 demo templates.</strong>
            </li>
            <li class="flex items-center mb-2 text-base font-medium tracking-tight text-gray-600">
              <span class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-gray-600">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </span>
              <strong>Fully responsive.</strong>
            </li>
            <li class="flex items-center mb-2 text-base font-medium tracking-tight text-gray-600 text-opacity-70">
              <span
                class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-gray-600 text-opacity-70">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </span>
              Figma.
            </li>
            <li class="flex items-center mb-2 text-base font-medium tracking-tight text-gray-600 text-opacity-70">
              <span
                class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-gray-600 text-opacity-70">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg>
              </span>
              Lifetime Support.
            </li>
            <li class="flex items-center mb-2 text-base font-medium tracking-tight text-gray-600 text-opacity-70">
              <span
                class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-gray-600 text-opacity-70">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <line x1="18" y1="6" x2="6" y2="18"></line>
                  <line x1="6" y1="6" x2="18" y2="18"></line>
                </svg> </span>Free Updates
            </li>
          </ul>

          <div class="mt-8">
            <button
              class="w-full items-center block px-10 py-3.5 text-base font-medium text-center text-blue-600 transition duration-500 ease-in-out transform border-2 border-white shadow-md rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 bg-white">Download</button>
          </div>
        </div>
      </div>
      <div class="w-full xl:w-1/4 md:w-2/6">
        <div class="relative flex flex-col h-full p-8 bg-blue-600 rounded-xl hover:border-white">
          <span class="mb-4 text-base font-medium tracking-widest text-white uppercase"> Bundle </span>
          <span class="flex items-center mb-8 text-base font-medium tracking-tight text-white"> No need to subscribe
          </span>
          <div class="flex items-end text-3xl font-black leading-none text-white lg:text-4xl">
            <span>
              <span>$69</span>
              <del class="text-2xl font-normal text-white">$149</del>
            </span>
          </div>
          <ul>
            <li class="flex items-center mt-8 mb-2 text-base font-medium tracking-tight text-white">
              <span class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-white">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </span>
              <strong>All templates.</strong>
            </li>
            <li class="flex items-center mb-2 text-base font-medium tracking-tight text-white">
              <span class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-white">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </span>
              <strong>Figma files.</strong>
            </li>
            <li class="flex items-center mb-2 text-base font-medium tracking-tight text-white">
              <span class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-white">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </span>
              <strong>Free Updates.</strong>
            </li>
            <li class="flex items-center mb-2 text-base font-medium tracking-tight text-white">
              <span class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-white">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </span>
              <strong>Fully Responsive</strong>
            </li>
            <li class="flex items-center mb-2 text-base font-medium tracking-tight text-white">
              <span class="inline-flex items-center justify-center flex-shrink-0 w-5 h-5 mr-2 text-white">
                <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5"
                  class="w-3 h-3" viewBox="0 0 24 24">
                  <path d="M20 6L9 17l-5-5"></path>
                </svg>
              </span>
              <strong>Lifetime Support</strong>
            </li>
          </ul>

          <div class="mt-8">
            <button
              class="w-full items-center block px-10 py-3.5 text-base font-medium text-center text-blue-600 transition duration-500 ease-in-out transform border-2 border-white shadow-md rounded-xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 bg-white">Buy
              for $69</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>