From 0616d93be36e24370de53e3e5acef81ecba6b005 Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Mon, 8 Feb 2021 18:56:14 +0100
Subject: [PATCH] change payments page

---
 packages/dashboard/src/pages/payments.js | 665 +++++++++++------------
 1 file changed, 307 insertions(+), 358 deletions(-)

diff --git a/packages/dashboard/src/pages/payments.js b/packages/dashboard/src/pages/payments.js
index c56ad3d5..04477ed9 100644
--- a/packages/dashboard/src/pages/payments.js
+++ b/packages/dashboard/src/pages/payments.js
@@ -26,374 +26,323 @@ export default function Payments() {
           </div>
         </dl>
 
-        {/* This example requires Tailwind CSS v2.0+ */}
-        <div className="bg-white">
-          <div className="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8">
-            <div className="sm:flex sm:flex-col sm:align-center">
-              <h1 className="text-5xl font-extrabold text-gray-900 sm:text-center">Pricing Plans</h1>
-              <p className="mt-5 text-xl text-gray-500 sm:text-center">
-                Start building for free, then add a site plan to go live. Account plans unlock additional features.
-              </p>
-            </div>
-            <div className="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0 xl:grid-cols-4">
-              <div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
-                <div className="p-6">
-                  <h2 className="text-lg leading-6 font-medium text-gray-900">Hobby</h2>
-                  <p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
-                  <p className="mt-8">
-                    <span className="text-4xl font-extrabold text-gray-900">$12</span>
-                    <span className="text-base font-medium text-gray-500">/mo</span>
-                  </p>
-                  <a
-                    href="#"
-                    className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
-                  >
-                    Buy Hobby
-                  </a>
+        {/* Payment details */}
+        <div className="space-y-6 sm:px-6 lg:px-0 lg:col-span-9">
+          <section aria-labelledby="payment_details_heading">
+            <form action="#" method="POST">
+              <div className="shadow sm:rounded-md sm:overflow-hidden">
+                <div className="bg-white py-6 px-4 sm:p-6">
+                  <div>
+                    <h2 id="payment_details_heading" className="text-lg leading-6 font-medium text-gray-900">
+                      Payment details
+                    </h2>
+                    <p className="mt-1 text-sm text-gray-500">
+                      Update your billing information. Please note that updating your location could affect your tax
+                      rates.
+                    </p>
+                  </div>
+                  <div className="mt-6 grid grid-cols-4 gap-6">
+                    <div className="col-span-4 sm:col-span-2">
+                      <label htmlFor="first_name" className="block text-sm font-medium text-gray-700">
+                        First name
+                      </label>
+                      <input
+                        type="text"
+                        name="first_name"
+                        id="first_name"
+                        autoComplete="cc-given-name"
+                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
+                      />
+                    </div>
+                    <div className="col-span-4 sm:col-span-2">
+                      <label htmlFor="last_name" className="block text-sm font-medium text-gray-700">
+                        Last name
+                      </label>
+                      <input
+                        type="text"
+                        name="last_name"
+                        id="last_name"
+                        autoComplete="cc-family-name"
+                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
+                      />
+                    </div>
+                    <div className="col-span-4 sm:col-span-2">
+                      <label htmlFor="email_address" className="block text-sm font-medium text-gray-700">
+                        Email address
+                      </label>
+                      <input
+                        type="text"
+                        name="email_address"
+                        id="email_address"
+                        autoComplete="email"
+                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
+                      />
+                    </div>
+                    <div className="col-span-4 sm:col-span-1">
+                      <label htmlFor="expiration_date" className="block text-sm font-medium text-gray-700">
+                        Expration date
+                      </label>
+                      <input
+                        type="text"
+                        name="expiration_date"
+                        id="expiration_date"
+                        autoComplete="cc-exp"
+                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
+                        placeholder="MM / YY"
+                      />
+                    </div>
+                    <div className="col-span-4 sm:col-span-1">
+                      <label htmlFor="security_code" className="flex items-center text-sm font-medium text-gray-700">
+                        <span>Security code</span>
+                        {/* Heroicon name: solid/question-mark-circle */}
+                        <svg
+                          className="ml-1 flex-shrink-0 h-5 w-5 text-gray-300"
+                          xmlns="http://www.w3.org/2000/svg"
+                          viewBox="0 0 20 20"
+                          fill="currentColor"
+                          aria-hidden="true"
+                        >
+                          <path
+                            fillRule="evenodd"
+                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
+                            clipRule="evenodd"
+                          />
+                        </svg>
+                      </label>
+                      <input
+                        type="text"
+                        name="security_code"
+                        id="security_code"
+                        autoComplete="cc-csc"
+                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
+                      />
+                    </div>
+                    <div className="col-span-4 sm:col-span-2">
+                      <label htmlFor="country" className="block text-sm font-medium text-gray-700">
+                        Country / Region
+                      </label>
+                      <select
+                        id="country"
+                        name="country"
+                        autoComplete="country"
+                        className="mt-1 block w-full bg-white border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
+                      >
+                        <option>United States</option>
+                        <option>Canada</option>
+                        <option>Mexico</option>
+                      </select>
+                    </div>
+                    <div className="col-span-4 sm:col-span-2">
+                      <label htmlFor="postal_code" className="block text-sm font-medium text-gray-700">
+                        ZIP / Postal
+                      </label>
+                      <input
+                        type="text"
+                        name="postal_code"
+                        id="postal_code"
+                        autoComplete="postal-code"
+                        className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-gray-900 focus:border-gray-900 sm:text-sm"
+                      />
+                    </div>
+                  </div>
                 </div>
-                <div className="pt-6 pb-8 px-6">
-                  <h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
-                  <ul className="mt-6 space-y-4">
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc.</span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
-                    </li>
-                  </ul>
+                <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
+                  <button
+                    type="submit"
+                    className="bg-gray-800 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+                  >
+                    Save
+                  </button>
                 </div>
               </div>
-              <div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
-                <div className="p-6">
-                  <h2 className="text-lg leading-6 font-medium text-gray-900">Freelancer</h2>
-                  <p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
-                  <p className="mt-8">
-                    <span className="text-4xl font-extrabold text-gray-900">$24</span>
-                    <span className="text-base font-medium text-gray-500">/mo</span>
-                  </p>
-                  <a
-                    href="#"
-                    className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
-                  >
-                    Buy Freelancer
-                  </a>
+            </form>
+          </section>
+          {/* Plan */}
+          <section aria-labelledby="plan_heading">
+            <form action="#" method="POST">
+              <div className="shadow sm:rounded-md sm:overflow-hidden">
+                <div className="bg-white py-6 px-4 space-y-6 sm:p-6">
+                  <div>
+                    <h2 id="plan_heading" className="text-lg leading-6 font-medium text-gray-900">
+                      Plan
+                    </h2>
+                  </div>
+                  <fieldset>
+                    <legend className="sr-only">Pricing plans</legend>
+                    <ul className="relative bg-white rounded-md -space-y-px">
+                      <li>
+                        {/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
+                        <div className="relative border rounded-tl-md rounded-tr-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
+                          <label className="flex items-center text-sm cursor-pointer">
+                            <input
+                              name="pricing_plan"
+                              type="radio"
+                              className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
+                              aria-describedby="plan-option-pricing-0 plan-option-limit-0"
+                            />
+                            <span className="ml-3 font-medium text-gray-900">Startup</span>
+                          </label>
+                          <p id="plan-option-pricing-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
+                            {/* On: "text-orange-900", Off: "text-gray-900" */}
+                            <span className="font-medium">$29 / mo</span>
+                            {/* On: "text-orange-700", Off: "text-gray-500" */}
+                            <span>($290 / yr)</span>
+                          </p>
+                          {/* On: "text-orange-700", Off: "text-gray-500" */}
+                          <p id="plan-option-limit-0" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
+                            Up to 5 active job postings
+                          </p>
+                        </div>
+                      </li>
+                      <li>
+                        {/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
+                        <div className="relative border border-gray-200 p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
+                          <label className="flex items-center text-sm cursor-pointer">
+                            <input
+                              name="pricing_plan"
+                              type="radio"
+                              className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
+                              aria-describedby="plan-option-pricing-1 plan-option-limit-1"
+                              defaultChecked
+                            />
+                            <span className="ml-3 font-medium text-gray-900">Business</span>
+                          </label>
+                          <p id="plan-option-pricing-1" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
+                            {/* On: "text-orange-900", Off: "text-gray-900" */}
+                            <span className="font-medium">$99 / mo</span>
+                            {/* On: "text-orange-700", Off: "text-gray-500" */}
+                            <span>($990 / yr)</span>
+                          </p>
+                          {/* On: "text-orange-700", Off: "text-gray-500" */}
+                          <p id="plan-option-limit-1" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
+                            Up to 25 active job postings
+                          </p>
+                        </div>
+                      </li>
+                      <li>
+                        {/* On: "bg-orange-50 border-orange-200 z-10", Off: "border-gray-200" */}
+                        <div className="relative border border-gray-200 rounded-bl-md rounded-br-md p-4 flex flex-col md:pl-4 md:pr-6 md:grid md:grid-cols-3">
+                          <label className="flex items-center text-sm cursor-pointer">
+                            <input
+                              name="pricing_plan"
+                              type="radio"
+                              className="h-4 w-4 text-orange-500 cursor-pointer focus:ring-gray-900 border-gray-300"
+                              aria-describedby="plan-option-pricing-2 plan-option-limit-2"
+                            />
+                            <span className="ml-3 font-medium text-gray-900">Enterprise</span>
+                          </label>
+                          <p id="plan-option-pricing-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
+                            {/* On: "text-orange-900", Off: "text-gray-900" */}
+                            <span className="font-medium">$249 / mo</span>
+                            {/* On: "text-orange-700", Off: "text-gray-500" */}
+                            <span>($2490 / yr)</span>
+                          </p>
+                          {/* On: "text-orange-700", Off: "text-gray-500" */}
+                          <p id="plan-option-limit-2" className="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-right">
+                            Unlimited active job postings
+                          </p>
+                        </div>
+                      </li>
+                    </ul>
+                  </fieldset>
+                  <div className="flex items-center">
+                    {/* Enabled: "bg-orange-500", Not Enabled: "bg-gray-200" */}
+                    <button
+                      type="button"
+                      className="bg-gray-200 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors ease-in-out duration-200"
+                      aria-pressed="true"
+                      aria-labelledby="annual-billing-label"
+                    >
+                      <span className="sr-only">Use setting</span>
+                      {/* Enabled: "translate-x-5", Not Enabled: "translate-x-0" */}
+                      <span
+                        aria-hidden="true"
+                        className="translate-x-0 inline-block h-5 w-5 rounded-full bg-white shadow transform ring-0 transition ease-in-out duration-200"
+                      />
+                    </button>
+                    <span className="ml-3" id="annual-billing-label">
+                      <span className="text-sm font-medium text-gray-900">Annual billing </span>
+                      <span className="text-sm text-gray-500">(Save 10%)</span>
+                    </span>
+                  </div>
                 </div>
-                <div className="pt-6 pb-8 px-6">
-                  <h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
-                  <ul className="mt-6 space-y-4">
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
-                    </li>
-                  </ul>
+                <div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
+                  <button
+                    type="submit"
+                    className="bg-gray-800 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-gray-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900"
+                  >
+                    Save
+                  </button>
                 </div>
               </div>
-              <div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
-                <div className="p-6">
-                  <h2 className="text-lg leading-6 font-medium text-gray-900">Startup</h2>
-                  <p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
-                  <p className="mt-8">
-                    <span className="text-4xl font-extrabold text-gray-900">$32</span>
-                    <span className="text-base font-medium text-gray-500">/mo</span>
-                  </p>
-                  <a
-                    href="#"
-                    className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
-                  >
-                    Buy Startup
-                  </a>
-                </div>
-                <div className="pt-6 pb-8 px-6">
-                  <h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
-                  <ul className="mt-6 space-y-4">
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Faucibus volutpat magna.</span>
-                    </li>
-                  </ul>
-                </div>
+            </form>
+          </section>
+          {/* Billing history */}
+          <section aria-labelledby="billing_history_heading">
+            <div className="bg-white pt-6 shadow sm:rounded-md sm:overflow-hidden">
+              <div className="px-4 sm:px-6">
+                <h2 id="billing_history_heading" className="text-lg leading-6 font-medium text-gray-900">
+                  Billing history
+                </h2>
               </div>
-              <div className="border border-gray-200 rounded-lg shadow-sm divide-y divide-gray-200">
-                <div className="p-6">
-                  <h2 className="text-lg leading-6 font-medium text-gray-900">Enterprise</h2>
-                  <p className="mt-4 text-sm text-gray-500">All the basics for starting a new business</p>
-                  <p className="mt-8">
-                    <span className="text-4xl font-extrabold text-gray-900">$48</span>
-                    <span className="text-base font-medium text-gray-500">/mo</span>
-                  </p>
-                  <a
-                    href="#"
-                    className="mt-8 block w-full bg-gray-800 border border-gray-800 rounded-md py-2 text-sm font-semibold text-white text-center hover:bg-gray-900"
-                  >
-                    Buy Enterprise
-                  </a>
-                </div>
-                <div className="pt-6 pb-8 px-6">
-                  <h3 className="text-xs font-medium text-gray-900 tracking-wide uppercase">What's included</h3>
-                  <ul className="mt-6 space-y-4">
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Potenti felis, in cras at at ligula nunc. </span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Orci neque eget pellentesque.</span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Donec mauris sit in eu tincidunt etiam.</span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Faucibus volutpat magna.</span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Id sed tellus in varius quisque.</span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Risus egestas faucibus.</span>
-                    </li>
-                    <li className="flex space-x-3">
-                      {/* Heroicon name: check */}
-                      <svg
-                        className="flex-shrink-0 h-5 w-5 text-green-500"
-                        xmlns="http://www.w3.org/2000/svg"
-                        viewBox="0 0 20 20"
-                        fill="currentColor"
-                        aria-hidden="true"
-                      >
-                        <path
-                          fillRule="evenodd"
-                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
-                          clipRule="evenodd"
-                        />
-                      </svg>
-                      <span className="text-sm text-gray-500">Risus cursus ullamcorper.</span>
-                    </li>
-                  </ul>
+              <div className="mt-6 flex flex-col">
+                <div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+                  <div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
+                    <div className="overflow-hidden border-t border-gray-200">
+                      <table className="min-w-full divide-y divide-gray-200">
+                        <thead className="bg-gray-50">
+                          <tr>
+                            <th
+                              scope="col"
+                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                            >
+                              Date
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                            >
+                              Description
+                            </th>
+                            <th
+                              scope="col"
+                              className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                            >
+                              Amount
+                            </th>
+                            {/*
+                    `relative` is added here due to a weird bug in Safari that causes `sr-only` headings to introduce overflow on the body on mobile.
+                  */}
+                            <th
+                              scope="col"
+                              className="relative px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+                            >
+                              <span className="sr-only">View receipt</span>
+                            </th>
+                          </tr>
+                        </thead>
+                        <tbody className="bg-white divide-y divide-gray-200">
+                          <tr>
+                            <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">1/1/2020</td>
+                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
+                              Business Plan - Annual Billing
+                            </td>
+                            <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">CA$109.00</td>
+                            <td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
+                              <a href="#" className="text-orange-600 hover:text-orange-900">
+                                View receipt
+                              </a>
+                            </td>
+                          </tr>
+                          {/* More items... */}
+                        </tbody>
+                      </table>
+                    </div>
+                  </div>
                 </div>
               </div>
             </div>
-          </div>
+          </section>
         </div>
       </div>
     </Layout>