Pricing Components in Metis library

<section class="section is-background-no-repeat is-background-contain" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container">
    <div class="has-text-centered mb-6">
      <h2 class="title is-spaced is-max-w-lg mx-auto">
        <span>Start saving time today and</span>
        <span class="has-text-primary">choose</span>
        <span>your best plan</span>
      </h2>
      <p class="subtitle is-max-w-sm mx-auto">Best for freelance developers who need to save their time.</p>
    </div>
    <div class="columns is-multiline">
      <div class="column is-6 is-4-desktop">
        <div class="py-6 box has-text-centered">
          <img class="image is-96x96 mx-auto" src="metis-assets/illustrations/people.png" alt="">
          <h3 class="title is-size-3 my-3">Begginer</h3>
          <span class="title is-size-3 is-spaced has-text-primary">$32.99</span>
          <p class="subtitle">user per month</p>
          <div class="mb-6 is-flex is-justify-content-center">
            <ul>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">3 Emails</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">1 Datebases</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">Unlimited Domains</span>
              </li>
              <li class="is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">10 GB Storage</span>
              </li>
            </ul>
          </div>
          <div class="buttons is-centered"><a class="button is-primary" href="#">Start Free Trial</a><a class="button is-dark is-outlined" href="#">Purchase</a></div>
        </div>
      </div>
      <div class="column is-6 is-4-desktop">
        <div class="py-6 box has-background-primary has-text-centered">
          <img class="image is-96x96 mx-auto" src="metis-assets/illustrations/job-interview.png" alt="">
          <h3 class="title is-size-3 my-3 has-text-white">Intermediate</h3>
          <span class="title is-size-3 is-spaced has-text-white">$55.99</span>
          <p class="subtitle">user per month</p>
          <div class="mb-6 is-flex is-justify-content-center">
            <ul>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-white-bis">6 Emails</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-white-bis">4 Datebases</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-white-bis">Unlimited Domains</span>
              </li>
              <li class="is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-white-bis">35 GB Storage</span>
              </li>
            </ul>
          </div>
          <div class="buttons is-centered"><a class="button is-light mr-2" href="#">Start Free Trial</a><a class="button is-light is-outlined" href="#">Purchase</a></div>
        </div>
      </div>
      <div class="column is-12 is-4-desktop">
        <div class="py-6 box has-text-centered">
          <img class="image is-96x96 mx-auto" src="metis-assets/illustrations/team-management.png" alt="">
          <h3 class="title is-size-3 my-3">Professional</h3>
          <span class="title is-size-3 is-spaced has-text-primary">$62.99</span>
          <p class="subtitle">user per month</p>
          <div class="mb-6 is-flex is-justify-content-center">
            <ul>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">12 Emails</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">8 Datebases</span>
              </li>
              <li class="mb-2 is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">Unlimited Domains</span>
              </li>
              <li class="is-flex">
                <svg class="mr-2 image is-24x24 has-text-success" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span class="has-text-grey">50 GB Storage</span>
              </li>
            </ul>
          </div>
          <div class="buttons is-centered"><a class="button is-primary" href="#">Start Free Trial</a><a class="button is-dark is-outlined" href="#">Purchase</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-5" style="background-image: url('metis-assets/backgrounds/intersect.svg'); background-size: contain; background-repeat: no-repeat; background-position: top;">
  <div class="container">
    <div class="row mb-5">
      <div class="col-12 col-md-8 col-lg-7 mx-auto text-center">
        <h2 class="mb-3 fs-1 fw-bold">
          <span>Start saving time today and</span>
          <span class="text-primary">choose</span>
          <span>your best plan</span>
        </h2>
        <p class="mb-0 text-muted">Best for freelance developers who need to save their time.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-12 col-md-6 col-lg-4 mb-4">
        <div class="px-3 py-5 text-center bg-white rounded shadow-sm">
          <img class="mb-4 img-fluid mx-auto" width="75" height="75" src="metis-assets/illustrations/people.png" alt="">
          <h3 class="mb-2 fs-1 fw-bold">Begginer</h3>
          <span class="fs-1 fw-bold text-primary">$32.99</span>
          <p class="mt-1 text-muted">user per month</p>
          <div class="my-4 py-2 d-flex justify-content-center">
            <ul class="list-unstyled text-start text-muted mb-0">
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>3 Emails</span>
              </li>
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>1 Datebases</span>
              </li>
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Unlimited Domains</span>
              </li>
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>10 GB Storage</span>
              </li>
            </ul>
          </div>
          <div><a class="btn btn-primary me-2" href="#">Start Free Trial</a><a class="btn btn-outline-secondary" href="#">Purchase</a></div>
        </div>
      </div>
      <div class="col-12 col-md-6 col-lg-4 mb-4">
        <div class="px-3 py-5 text-center text-white bg-primary rounded shadow-sm">
          <img class="mb-4 img-fluid mx-auto" width="75" height="75" src="metis-assets/illustrations/job-interview.png" alt="">
          <h3 class="mb-2 fs-1 fw-bold">Intermediate</h3>
          <span class="fs-1 fw-bold">$55.99</span>
          <p class="mt-1">user per month</p>
          <div class="my-4 py-2 d-flex justify-content-center">
            <ul class="list-unstyled text-start mb-0">
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>6 Emails</span>
              </li>
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>4 Datebases</span>
              </li>
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Unlimited Domains</span>
              </li>
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>35 GB Storage</span>
              </li>
            </ul>
          </div>
          <div><a class="btn btn-light me-2" href="#">Start Free Trial</a><a class="btn btn-outline-light" href="#">Purchase</a></div>
        </div>
      </div>
      <div class="col-12 col-lg-4 mb-4">
        <div class="px-3 py-5 text-center bg-white rounded shadow-sm">
          <img class="mb-4 img-fluid mx-auto" width="75" height="75" src="metis-assets/illustrations/team-management.png" alt="">
          <h3 class="mb-2 fs-1 fw-bold">Professional</h3>
          <span class="fs-1 fw-bold text-primary">$62.99</span>
          <p class="mt-1 text-muted">user per month</p>
          <div class="my-4 py-2 d-flex justify-content-center">
            <ul class="list-unstyled text-start text-muted mb-0">
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>12 Emails</span>
              </li>
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>8 Datebases</span>
              </li>
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Unlimited Domains</span>
              </li>
              <li class="mb-2">
                <svg class="me-2 text-success" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>50 GB Storage</span>
              </li>
            </ul>
          </div>
          <div><a class="btn btn-primary me-2" href="#">Start Free Trial</a><a class="btn btn-outline-secondary" href="#">Purchase</a></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="py-20 xl:bg-contain bg-top bg-no-repeat" style="background-image: url('metis-assets/backgrounds/intersect.svg');">
  <div class="container px-4 mx-auto">
    <div class="text-center mb-16">
      <h2 class="max-w-lg mx-auto mb-4 text-4xl font-bold font-heading">
        <span>Start saving time today and</span>
        <span class="text-blue-600">choose</span>
        <span>your best plan</span>
      </h2>
      <p class="max-w-sm mx-auto text-lg text-blueGray-400">Best for freelance developers who need to save their time</p>
    </div>
    <div class="flex flex-wrap -mx-3">
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="pt-16 pb-8 px-4 text-center bg-white rounded shadow">
          <img class="h-20 mb-6 mx-auto" src="metis-assets/illustrations/people.png" alt="">
          <h3 class="mb-2 text-4xl font-bold font-heading">Begginer</h3>
          <span class="text-4xl text-blue-600 font-bold font-heading">$32.99</span>
          <p class="mt-2 mb-8 text-blueGray-400">user per month</p>
          <div class="flex flex-col items-center mb-8">
            <ul class="text-blueGray-400">
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>3 Emails</span>
              </li>
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>1 Datebases</span>
              </li>
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Unlimited Domains</span>
              </li>
              <li class="flex">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>10 GB Storage</span>
              </li>
            </ul>
          </div>
          <div><a class="block sm:inline-block py-4 px-6 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Start Free Trial</a><a class="block sm:inline-block py-4 px-6 text-xs text-blueGray-500 hover:text-blueGray-600 text-center font-semibold leading-none bg-white border border-blueGray-200 hover:border-blueGray-300 rounded" href="#">Purchase</a></div>
        </div>
      </div>
      <div class="w-full md:w-1/2 lg:w-1/3 px-3 mb-6">
        <div class="pt-16 pb-8 px-4 text-center text-white bg-blue-600 rounded shadow">
          <img class="h-20 mb-6 mx-auto" src="metis-assets/illustrations/job-interview.png" alt="">
          <h3 class="mb-2 text-4xl font-bold font-heading">Intermediate</h3>
          <span class="text-4xl font-bold font-heading">$55.99</span>
          <p class="mt-2 mb-8">user per month</p>
          <div class="flex flex-col items-center mb-8">
            <ul>
              <li class="flex items-center mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>6 Emails</span>
              </li>
              <li class="flex items-center mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>4 Datebases</span>
              </li>
              <li class="flex items-center mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Unlimited Domains</span>
              </li>
              <li class="flex items-center">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>35 GB Storage</span>
              </li>
            </ul>
          </div>
          <div><a class="block sm:inline-block py-4 px-6 mb-4 sm:mb-0 sm:mr-3 text-xs text-blue-600 font-semibold leading-none bg-white hover:bg-blueGray-50 rounded" href="#">Start Free Trial</a><a class="block sm:inline-block py-4 px-6 text-xs font-semibold leading-none border border border-blue-500 hover:border-blue-400 rounded" href="#">Purchase</a></div>
        </div>
      </div>
      <div class="w-full lg:w-1/3 px-3 mb-6">
        <div class="pt-16 pb-8 px-4 text-center bg-white rounded shadow">
          <img class="h-20 mb-6 mx-auto" src="metis-assets/illustrations/team-management.png" alt="">
          <h3 class="mb-2 text-4xl font-bold font-heading">Professional</h3>
          <span class="text-4xl text-blue-600 font-bold font-heading">$62.99</span>
          <p class="mt-2 mb-8 text-blueGray-400">user per month</p>
          <div class="flex flex-col items-center mb-8">
            <ul class="text-blueGray-400">
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>12 Emails</span>
              </li>
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>8 Datebases</span>
              </li>
              <li class="flex mb-3">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>Unlimited Domains</span>
              </li>
              <li class="flex">
                <svg class="w-6 h-6 mr-2 text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <span>50 GB Storage</span>
              </li>
            </ul>
          </div>
          <div><a class="block sm:inline-block py-4 px-6 mb-4 sm:mb-0 sm:mr-3 text-xs text-white text-center font-semibold leading-none bg-blue-600 hover:bg-blue-700 rounded" href="#">Start Free Trial</a><a class="block sm:inline-block py-4 px-6 text-xs text-blueGray-500 hover:text-blueGray-600 text-center font-semibold leading-none bg-white border border-blueGray-200 hover:border-blueGray-300 rounded" href="#">Purchase</a></div>
        </div>
      </div>
    </div>
  </div>
</section>