Horizontal Pricing Tables Using Tailwind UI

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  .body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }
</style>

<section class="text-gray-600 body-font">
  <div class="container px-5 mx-auto py-14">
    <div class="flex flex-col w-full mb-20 text-center">
      <h1 class="mb-4 text-3xl font-extrabold text-yellow-700 sm:text-4xl title-font">Economical Package</h1>
      <p class="mx-auto text-base leading-relaxed lg:w-2/3">Get maximum value with our Economical Package! Tailored for individuals and businesses looking to save without compromising quality. Enjoy our full range of features at an affordable price. Your future success starts right here.</p>
    </div>
    <div class="w-full mx-auto overflow-auto">
      <table class="w-full mx-auto text-left whitespace-no-wrap table-auto lg:max-w-4xl">
        <thead class="bg-yellow-500">
          <tr>
            <th class="px-4 py-4 text-base font-semibold tracking-wider rounded-tl rounded-bl title-font text-gray-50">Plan</th>
            <th class="px-4 py-4 text-base font-semibold tracking-wider title-font text-gray-50">Speed</th>
            <th class="px-4 py-4 text-base font-semibold tracking-wider title-font text-gray-50">Storage</th>
            <th class="px-4 py-4 text-base font-semibold tracking-wider title-font text-gray-50">Price</th>
            <th class="w-10 text-sm font-medium tracking-wider text-gray-900 rounded-tr rounded-br title-font"></th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td class="px-4 py-3 font-semibold">Small</td>
            <td class="px-4 py-3">5 Mb/s</td>
            <td class="px-4 py-3">15 GB</td>
            <td class="px-4 py-3 text-2xl font-bold text-yellow-500">Free</td>
            <td class="w-40 text-center">
              <button
              class="flex items-center px-4 py-2 mx-auto text-sm bg-yellow-500 rounded-lg cursor-pointer text-yellow-50 hover:bg-yellow-800 hover:text-white">
              <span class="hidden sm:flex">Get Started</span>
              <svg class="w-5 h-5 text-white fill-current sm:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 13H4V11H12V4L20 12L12 20V13Z"></path></svg>
            </button>
          </tr>
          <tr>
            <td class="px-4 py-3 font-semibold bg-yellow-100">Medium
              <span class="bg-yellow-500 text-white py-1 px-2.5 rounded-full text-xs sm:ml-1">Popular</span>
            </td>
            <td class="px-4 py-3 bg-yellow-100">25 Mb/s</td>
            <td class="px-4 py-3 bg-yellow-100">25 GB</td>
            <td class="px-4 py-3 text-2xl font-bold text-yellow-500 bg-yellow-100">$15</td>
            <td class="w-40 text-center bg-yellow-100">
              <button
              class="flex items-center px-4 py-2 mx-auto text-sm bg-yellow-500 rounded-lg cursor-pointer text-yellow-50 hover:bg-yellow-800 hover:text-white">
              <span class="hidden sm:flex">Get Started</span>
              <svg class="w-5 h-5 text-white fill-current sm:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 13H4V11H12V4L20 12L12 20V13Z"></path></svg>
            </button>
            </td>
          </tr>
          <tr>
            <td class="px-4 py-3 font-semibold">Large</td>
            <td class="px-4 py-3">36 Mb/s</td>
            <td class="px-4 py-3">40 GB</td>
            <td class="px-4 py-3 text-2xl font-bold text-yellow-500">$30</td>
            <td class="w-40 text-center">
              <button
              class="flex items-center px-4 py-2 mx-auto text-sm bg-yellow-500 rounded-lg cursor-pointer text-yellow-50 hover:bg-yellow-800 hover:text-white">
              <span class="hidden sm:flex">Get Started</span>
              <svg class="w-5 h-5 text-white fill-current sm:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 13H4V11H12V4L20 12L12 20V13Z"></path></svg>
            </button>
          </tr>
          <tr>
            <td class="px-4 py-3 font-semibold bg-yellow-100">Extra</td>
            <td class="px-4 py-3 bg-yellow-100">48 Mb/s</td>
            <td class="px-4 py-3 bg-yellow-100">120 GB</td>
            <td class="px-4 py-3 text-2xl font-bold text-yellow-500 bg-yellow-100">$50</td>
            <td class="w-40 text-center bg-yellow-100">
              <button
              class="flex items-center px-4 py-2 mx-auto text-sm bg-yellow-500 rounded-lg cursor-pointer text-yellow-50 hover:bg-yellow-800 hover:text-white">
              <span class="hidden sm:flex">Get Started</span>
              <svg class="w-5 h-5 text-white fill-current sm:hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 13H4V11H12V4L20 12L12 20V13Z"></path></svg>
            </button>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</section>