vvveb-cms/static/Vvvebjs/demo/landing/sections/pricing-table/pricing-table-14.html

<section class="pricing-table-14 my-3" aria-label="pricing-table-14">
  <div class="container py-4">
    <div class="row">
      <div class="col-md-12 text-center">
        <div class="mb-4">
          <span editable="inline" class="mt-4 d-block lead">OUR PRICING PLANS</span>
          <h2 editable="inline" class="display-2 mb-3">
            <b>Find the Right Tier.</b>
          </h2>
          <p editable="inline" class="text-secondary">Flexible pricing options for freelancers and design teams. No Credit Card required!
            <br>
          </p>
        </div>
      </div>
    </div>
    <div class="row mt-4" id="pricing">
      <div class="col-lg-4 mb-4 mb-lg-0">
        <div class="py-3 shadow-sm bg-dark text-white rounded">

          <div class="mb-4 text-left px-4">
            <svg class="text-warning" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="2em" height="2em" viewBox="0 0 24 24" style="" lc-helper="svg-icon" fill="currentColor">
              <path d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7.07,18.28C7.5,17.38 10.12,16.5 12,16.5C13.88,16.5 16.5,17.38 16.93,18.28C15.57,19.36 13.86,20 12,20C10.14,20 8.43,19.36 7.07,18.28M18.36,16.83C16.93,15.09 13.46,14.5 12,14.5C10.54,14.5 7.07,15.09 5.64,16.83C4.62,15.5 4,13.82 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,13.82 19.38,15.5 18.36,16.83M12,6C10.06,6 8.5,7.56 8.5,9.5C8.5,11.44 10.06,13 12,13C13.94,13 15.5,11.44 15.5,9.5C15.5,7.56 13.94,6 12,6M12,11A1.5,1.5 0 0,1 10.5,9.5A1.5,1.5 0 0,1 12,8A1.5,1.5 0 0,1 13.5,9.5A1.5,1.5 0 0,1 12,11Z"></path>
            </svg>

            <span editable="inline" class="ml-2 fw-light">Individual</span>
          </div>
          <div class="mb-5 px-4">
            <div editable="rich">
              <h2 class="text-light">Professional</h2>

              <p class="h5">$19.99 <span class="text-secondary fw-light">/month</span>
              </p>
            </div>
          </div>

          <div class="mb-5 text-left">
            <div editable="rich">

              <ul>
                <li>1 users</li>
                <li>20 TB of secure storage</li>
                <li>Premium productivity features and simple, secure file sharing</li>
              </ul>
            </div>
          </div>
          <div class="mb-4 text-center">
            <a class="btn btn-outline-primary " href="#" role="button">Try free for 30 days</a>
          </div>
        </div>
      </div>

      <div class="col-lg-4 mb-4 mb-lg-0">
        <div class="py-3 rounded shadow">
          <div class="mb-4 text-left px-4">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="text-primary" width="2em" height="2em" viewBox="0 0 24 24" style="" lc-helper="svg-icon" fill="currentColor">
              <path d="M19 17V19H7V17S7 13 13 13 19 17 19 17M16 8A3 3 0 1 0 13 11A3 3 0 0 0 16 8M19.2 13.06A5.6 5.6 0 0 1 21 17V19H24V17S24 13.55 19.2 13.06M18 5A2.91 2.91 0 0 0 17.11 5.14A5 5 0 0 1 17.11 10.86A2.91 2.91 0 0 0 18 11A3 3 0 0 0 18 5M7.34 8.92L8.5 10.33L3.75 15.08L1 12.08L2.16 10.92L3.75 12.5L7.34 8.92"></path>
            </svg>

            <span editable="inline" class="ml-2 fw-light">Small Team</span>
          </div>
          <div class="mb-5 px-4">
            <div editable="rich">
              <h2 class=" ">Standard</h2>

              <p class="h5 text-primary">$39.99 <span class="text-secondary fw-light">/month</span>
              </p>
            </div>
          </div>

          <div class="mb-5 text-left">
            <div editable="rich">

              <ul>
                <li> 2 users</li>
                <li> 20 TB of secure storage</li>
                <li> Premium productivity features and simple, secure file sharing</li>
              </ul>
            </div>
          </div>
          <div class="mb-4 text-center">
            <a class="btn btn-outline-primary " href="#" role="button">Try free for 30 days</a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 ">
        <div class="py-3 rounded border">
          <div class="mb-4 text-left px-4">
            <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" class="text-primary" width="2em" height="2em" viewBox="0 0 24 24" style="" lc-helper="svg-icon" fill="currentColor">
              <path d="M5,3V21H11V17.5H13V21H19V3H5M7,5H9V7H7V5M11,5H13V7H11V5M15,5H17V7H15V5M7,9H9V11H7V9M11,9H13V11H11V9M15,9H17V11H15V9M7,13H9V15H7V13M11,13H13V15H11V13M15,13H17V15H15V13M7,17H9V19H7V17M15,17H17V19H15V17Z"></path>
            </svg>

            <span editable="inline" class="ml-2 fw-light">Large Team</span>
          </div>
          <div class="mb-5 px-4">
            <div editable="rich">
              <h2 class=" ">Ultimate</h2>

              <p class="h5 text-primary">$99.99 <span class="text-secondary fw-lighter">/month</span>
              </p>
            </div>
          </div>

          <div class="mb-5 text-left">
            <div editable="rich">

              <ul>
                <li>+20 users</li>
                <li>100 TB of secure storage</li>
                <li> Premium productivity features and simple, secure file sharing</li>
              </ul>
            </div>
          </div>
          <div class="mb-4 text-center">
            <a class="btn btn-outline-primary" href="#" role="button">Try free for 30 days</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>