Pricing Table with Tailwind CSS

<div class="m-4">
  <table class="w-full text-base text-gray-700">
    <thead>
      <tr>
        <th
          class="w-1/5 bg-gray-100 text-left font-normal align-top px-4 py-6"
        ></th>
        <th
          class="w-1/5 bg-gray-200 text-center border border-gray-400 font-normal px-4 py-6"
        >
          <div class="uppercase tracking-wide font-bold text-gray-700">
            Hobby
          </div>
          <div class="mt-3">
            <span class="text-lg">$</span>
            <span class="font-bold text-4xl">15</span>
            <span class="ml-2 text-sm">/ month</span>
          </div>
          <div class="mt-3">
            <a
              href="#"
              class="bg-blue-500 hover:bg-blue-700 text-white inline-block rounded w-4/5 px-4 py-3"
            >
              Sign Up!
            </a>
          </div>
        </th>
        <th
          class="w-1/5 bg-gray-200 text-center border border-gray-400 font-normal px-4 py-6"
        >
          <div class="uppercase tracking-wide font-bold text-gray-700">
            Growth
          </div>
          <div class="mt-3">
            <span class="text-lg">$</span>
            <span class="font-bold text-4xl">25</span>
            <span class="ml-2 text-sm">/ month</span>
          </div>
          <div class="mt-3">
            <a
              href="#"
              class="bg-blue-500 hover:bg-blue-700 text-white inline-block rounded w-4/5 px-4 py-3"
            >
              Sign Up!
            </a>
          </div>
        </th>
        <th
          class="w-1/5 bg-gray-200 text-center border border-gray-400 font-normal px-4 py-6"
        >
          <div class="uppercase tracking-wide font-bold text-gray-700">
            Business
          </div>
          <div class="mt-3">
            <span class="text-lg">$</span>
            <span class="font-bold text-4xl">50</span>
            <span class="ml-2 text-sm">/ month</span>
          </div>
          <div class="mt-3">
            <a
              href="#"
              class="bg-blue-500 hover:bg-blue-700 text-white inline-block rounded w-4/5 px-4 py-3"
            >
              Sign Up!
            </a>
          </div>
        </th>
        <th
          class="w-1/5 bg-gray-200 text-center border border-gray-400 font-normal px-4 py-6"
        >
          <div class="uppercase tracking-wide font-bold text-gray-700">
            Enterprise
          </div>
          <div class="mt-3">
            <span class="text-lg">$</span>
            <span class="font-bold text-4xl">90</span>
            <span class="ml-2 text-sm">/ month</span>
          </div>
          <div class="mt-3">
            <a
              href="#"
              class="bg-blue-500 hover:bg-blue-700 text-white inline-block rounded w-4/5 px-4 py-3"
            >
              Sign Up!
            </a>
          </div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-white even:bg-gray-100">
        <td class="text-left border border-gray-400 px-4 py-6">
          Shipping Discount
        </td>
        <td class="text-center border border-gray-400 px-4 py-6">$19</td>
        <td class="text-center border border-gray-400 px-4 py-6">$29</td>
        <td class="text-center border border-gray-400 px-4 py-6">$39</td>
        <td class="text-center border border-gray-400 px-4 py-6">$49</td>
      </tr>
      <tr class="bg-white even:bg-gray-100">
        <td class="text-left border border-gray-400 px-4 py-6">
          Print Shipping Labels
        </td>
        <td class="text-center border border-gray-400 px-4 py-6">3</td>
        <td class="text-center border border-gray-400 px-4 py-6">4</td>
        <td class="text-center border border-gray-400 px-4 py-6">5</td>
        <td class="text-center border border-gray-400 px-4 py-6">6</td>
      </tr>
      <tr class="bg-white even:bg-gray-100">
        <td class="text-left border border-gray-400 px-4 py-6">
          Same Day Delivery
        </td>
        <td class="text-center border border-gray-400 px-4 py-6">7</td>
        <td class="text-center border border-gray-400 px-4 py-6">8</td>
        <td class="text-center border border-gray-400 px-4 py-6">9</td>
        <td class="text-center border border-gray-400 px-4 py-6">10</td>
      </tr>
      <tr class="bg-white even:bg-gray-100">
        <td class="text-left border border-gray-400 px-4 py-6">Contributors</td>
        <td class="text-center border border-gray-400 px-4 py-6">11</td>
        <td class="text-center border border-gray-400 px-4 py-6">12</td>
        <td class="text-center border border-gray-400 px-4 py-6">13</td>
        <td class="text-center border border-gray-400 px-4 py-6">14</td>
      </tr>
      <tr class="bg-white even:bg-gray-100">
        <td class="text-left border border-gray-400 px-4 py-6">API Calls</td>
        <td class="text-center border border-gray-400 px-4 py-6">
          <div class="mt-3">
            <span class="font-bold md:text-lg">1,000 calls</span>
            <br />
            <span class="ml-2 text-xs">/ month</span>
          </div>
        </td>
        <td class="text-center border border-gray-400 px-4 py-6">
          <div class="mt-3">
            <span class="font-bold md:text-lg">5,000 calls</span>
            <br />
            <span class="ml-2 text-xs">/ month</span>
          </div>
        </td>
        <td class="text-center border border-gray-400 px-4 py-6">
          <div class="mt-3">
            <span class="font-bold md:text-lg">10,000 calls</span>
            <br />
            <span class="ml-2 text-xs">/ month</span>
          </div>
        </td>
        <td class="text-center border border-gray-400 px-4 py-6">
          <div class="mt-3">
            <span class="font-bold md:text-lg">50,000 calls</span>
            <br />
            <span class="ml-2 text-xs">/ month</span>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>