<section class="body-font text-gray-600">
  <div
    class="container pl-5 pr-5 px-5 pt-24 pb-24 py-24 ml-auto mr-auto mx-auto max-w-screen-2xl"
  >
    <div class="flex flex-col text-center w-full mb-20">
      <h1
        class="title-font text-3xl font-medium mb-2 text-gray-900 sm:text-4xl"
      >
        Subscription Options
      </h1>
      <p class="ml-auto mr-auto mx-auto leading-relaxed text-base lg:w-2/3">
        Compare our flexible plans to find the best fit for your streaming,
        backup, or collaboration needs.
      </p>
    </div>
    <div class="overflow-auto w-full ml-auto mr-auto mx-auto lg:w-2/3">
      <table class="table-auto whitespace-no-wrap w-full text-left">
        <thead class>
          <tr class>
            <th
              class="title-font tracking-wider pl-4 pr-4 px-4 pt-3 pb-3 py-3 font-medium text-gray-900 text-sm bg-gray-100 rounded-tl rounded-bl"
            >
              Plan
            </th>
            <th
              class="title-font tracking-wider pl-4 pr-4 px-4 pt-3 pb-3 py-3 font-medium text-gray-900 text-sm bg-gray-100"
            >
              Speed
            </th>
            <th
              class="title-font tracking-wider pl-4 pr-4 px-4 pt-3 pb-3 py-3 font-medium text-gray-900 text-sm bg-gray-100"
            >
              Storage
            </th>
            <th
              class="title-font tracking-wider pl-4 pr-4 px-4 pt-3 pb-3 py-3 font-medium text-gray-900 text-sm bg-gray-100"
            >
              Price
            </th>
            <th
              class="title-font tracking-wider w-10 font-medium text-gray-900 text-sm bg-gray-100 rounded-tr rounded-br"
            ></th>
          </tr>
        </thead>
        <tbody class>
          <tr class>
            <td class="pl-4 pr-4 px-4 pt-3 pb-3 py-3">Lite</td>
            <td class="pl-4 pr-4 px-4 pt-3 pb-3 py-3">4 Mb/s</td>
            <td class="pl-4 pr-4 px-4 pt-3 pb-3 py-3">10 GB</td>
            <td class="pl-4 pr-4 px-4 pt-3 pb-3 py-3 text-lg text-gray-900">
              Free
            </td>
            <td class="w-10 text-center">
              <input name="plan" type="radio" class />
            </td>
          </tr>
          <tr class>
            <td
              class="border-t-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3"
            >
              Plus
            </td>
            <td
              class="border-t-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3"
            >
              20 Mb/s
            </td>
            <td
              class="border-t-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3"
            >
              30 GB
            </td>
            <td
              class="border-t-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3 text-lg text-gray-900"
            >
              &#x24;19
            </td>
            <td class="border-t-2 border-gray-200 w-10 text-center">
              <input name="plan" type="radio" class />
            </td>
          </tr>
          <tr class>
            <td
              class="border-t-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3"
            >
              Growth
            </td>
            <td
              class="border-t-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3"
            >
              35 Mb/s
            </td>
            <td
              class="border-t-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3"
            >
              60 GB
            </td>
            <td
              class="border-t-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3 text-lg text-gray-900"
            >
              &#x24;39
            </td>
            <td class="border-t-2 border-gray-200 w-10 text-center">
              <input name="plan" type="radio" class />
            </td>
          </tr>
          <tr class>
            <td
              class="border-t-2 border-b-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3"
            >
              Ultra
            </td>
            <td
              class="border-t-2 border-b-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3"
            >
              60 Mb/s
            </td>
            <td
              class="border-t-2 border-b-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3"
            >
              150 GB
            </td>
            <td
              class="border-t-2 border-b-2 border-gray-200 pl-4 pr-4 px-4 pt-3 pb-3 py-3 text-lg text-gray-900"
            >
              &#x24;79
            </td>
            <td class="border-t-2 border-b-2 border-gray-200 w-10 text-center">
              <input name="plan" type="radio" class />
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="flex pl-4 mt-4 w-full ml-auto mr-auto mx-auto lg:w-2/3">
      <a class="inline-flex text-indigo-500 items-center md:mb-2 lg:mb-0">
        <span data-node-handle="base-text" class="inline-block h-auto w-auto">
          Learn More
        </span>
        <svg
          fill="none"
          stroke="currentColor"
          stroke-linecap="round"
          stroke-linejoin="round"
          stroke-width="2"
          class="w-4 h-4 ml-2"
          viewBox="0 0 24 24"
        >
          <path d="M5 12h14M12 5l7 7-7 7"></path>
        </svg>
      </a>
      <button
        class="flex ml-auto text-white bg-indigo-500 border-0 pt-2 pb-2 py-2 pl-6 pr-6 px-6 focus:outline-none rounded hover:bg-indigo-600"
      >
        Button
      </button>
    </div>
  </div>
</section>