Pricing

Copy
<section>
  <div class="bg-gradient-primary position-relative">
    <div class="container pb-lg-9 pb-7 pt-7 postion-relative z-index-2">
      <div class="row">
        <div class="col-md-8 mx-auto text-center">
          <span class="badge bg-dark mb-2">Pricing</span>
          <h3 class="text-white">See our pricing</h3>
          <p class="text-white">You have Free Unlimited Updates and Premium Support on each package.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-n8">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 mb-lg-auto mb-4 my-auto p-md-0 ms-auto">
          <div class="card border-radius-top-end-lg-0 border-radius-bottom-end-lg-0">
            <div class="card-header text-center pt-4 pb-3">
              <h6 class="text-dark opacity-8 mb-0">Starter</h6>
              <h1 class="font-weight-bold">
                <small>$</small>199
              </h1>
            </div>
            <div class="card-body mx-auto pt-0">
              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Complete documentation</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Working materials in Sketch</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">500MB cloud storage</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Lite support</span>
                </div>
              </div>
            </div>
            <div class="card-footer pt-0">
              <a href="javascript:;" class="btn w-100 bg-gradient-dark mb-0">
                Buy now
              </a>
            </div>
          </div>
        </div>

        <div class="col-lg-3 p-md-0 mb-lg-auto mb-4 z-index-2">
          <div class="card">
            <div class="card-header text-center pt-4 pb-3">
              <h6 class="text-dark opacity-8 text mb-0 mt-2">Pro</h6>
              <h1 class="font-weight-bold">
                <small>$</small>299
              </h1>
            </div>
            <div class="card-body mx-auto pt-0">
              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Complete documentation</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Working materials in Sketch</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">100GB cloud storage</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">500 team members</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Premium support</span>
                </div>
              </div>
            </div>
            <div class="card-footer pt-0">
              <a href="javascript:;" class="btn btn-icon bg-gradient-primary d-block mb-0 icon-move-right">Try Pro
                <i class="fas fa-arrow-right ms-2" aria-hidden="true"></i>
              </a>
            </div>
          </div>
        </div>

        <div class="col-lg-3 mb-lg-auto mb-4 my-auto p-md-0 me-auto">
          <div class="card border-radius-top-start-lg-0 border-radius-bottom-start-lg-0">
            <div class="card-header text-center pt-4 pb-2">
              <h6 class="text-dark opacity-8 text mb-0">Premium</h6>
              <h1 class="font-weight-bold">
                <small>$</small>399
              </h1>
            </div>
            <div class="card-body mx-auto pt-0">
              <div class="justify-content-start d-flex px-2 py-1 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Complete documentation</span>
                </div>
              </div>
              <div class="justify-content-start d-flex px-2 py-1 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Working materials in Sketch</span>
                </div>
              </div>
              <div class="justify-content-start d-flex px-2 py-1 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">2GB cloud storage</span>
                </div>
              </div>
              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-dark opacity-6 text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Premium support</span>
                </div>
              </div>
            </div>
            <div class="card-footer pt-0">
              <a href="javascript:;" class="btn w-100 bg-gradient-dark mb-0">Buy now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<!-- START Pricing w/ 2 cards & nav tabs -->
<section class="py-2 bg-light">
  <div class="container pt-5">
    <div class="row">
      <div class="col-lg-4 col-md-10 d-flex justify-content-center flex-column">
        <h3 class="mt-3">Choose a plan for your next project</h3>
          <p class="lead">You have Free Unlimited Updates and Premium Support on each package. You also have 20 days to request a refund.</p>
          <div class="nav-wrapper me-auto mt-4 mb-5 mb-lg-0">
            <ul class="nav nav-pills nav-fill p-1 rounded-pill" id="tabs-pricing" role="tablist">
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 active rounded-pill" id="tabs-iconpricing-tab-1" data-bs-toggle="tab" href="#personal" role="tab" aria-controls="tabs-pricing-tab-1" aria-selected="true">
                  Freelancer
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-sm-3 mb-md-0 rounded-pill" id="tabs-iconpricing-tab-2" data-bs-toggle="tab" href="#commercial" role="tab" aria-controls="tabs-pricing-tab-2" aria-selected="false">
                  Startup
                </a>
              </li>
            </ul>
          </div>
      </div>
      <div class="col-lg-7 col-md-12 ms-lg-auto me-lg-auto">
        <div class="tab-content tab-space">
          <div class="tab-pane active" id="personal">
            <div class="row">
              <div class="col-md-6">
                <div class="card card-pricing bg-white border-0 text-center mb-4">
                  <div class="card-header bg-transparent">
                    <h6 class="text-uppercase ls-1 py-3 mb-0">Standard</h6>
                  </div>
                  <div class="card-body text-dark">
                    <p class="display-2 font-weight-bold mb-0">$25</p>
                    <span>per month</span>
                    <ul class="list-unstyled my-4">
                      <li class="align-items-center">
                        <b>20GB</b> <span>File Storage</span>
                      </li>
                      <li class="align-items-center my-2">
                        <b>15</b> <span>Users</span>
                      </li>
                      <li class="align-items-center">
                        <b>False</b> <span>Support</span>
                      </li>
                    </ul>
                  </div>
                  <div class="card-footer bg-transparent">
                    <button class="btn btn-outline-primary">Request a demo</button>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card card-pricing bg-gradient-primary border-0 text-center mb-4 overflow-hidden">
                  <div class="card-header bg-transparent">
                    <h6 class="text-uppercase text-white ls-1 py-3 mb-0">Premium</h6>
                  </div>
                  <div class="card-body text-white position-relative">
                    <p class="display-2 font-weight-bold mb-0">$59</p>
                    <span>per month</span>
                    <ul class="list-unstyled my-4">
                      <li class="align-items-center">
                        <b>50GB</b> <span>File Storage</span>
                      </li>
                      <li class="align-items-center my-2">
                        <b>100</b> <span>Users</span>
                      </li>
                      <li class="align-items-center">
                        <b>Premium</b> <span>Support</span>
                      </li>
                    </ul>
                  </div>
                  <div class="card-footer bg-transparent position-relative">
                    <button class="btn bg-white text-dark">Request a demo</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="tab-pane" id="commercial">
            <div class="row">
              <div class="col-md-6">
                <div class="card card-pricing bg-white border-0 text-center mb-4">
                  <div class="card-header bg-transparent">
                    <h6 class="text-uppercase ls-1 py-3 mb-0">Gold</h6>
                  </div>
                  <div class="card-body text-dark">
                    <p class="display-2 font-weight-bold mb-0">$100</p>
                    <span>per month</span>
                    <ul class="list-unstyled my-4">
                      <li class="align-items-center">
                        <b>200GB</b> <span>File Storage</span>
                      </li>
                      <li class="align-items-center my-2">
                        <b>Unlimited</b> <span>Users</span>
                      </li>
                      <li class="align-items-center">
                        <b>Premium</b> <span>Support</span>
                      </li>
                    </ul>
                  </div>
                  <div class="card-footer bg-transparent">
                    <button class="btn btn-outline-primary">Request a demo</button>
                  </div>
                </div>
              </div>
              <div class="col-md-6">
                <div class="card card-pricing bg-gradient-primary border-0 text-center mb-4 overflow-hidden">
                  <div class="card-header bg-transparent">
                    <h6 class="text-uppercase text-white ls-1 py-3 mb-0">Platinum</h6>
                  </div>
                  <div class="card-body text-white position-relative">
                    <p class="display-2 font-weight-bold mb-0">$135</p>
                    <span>per month</span>
                    <ul class="list-unstyled my-4">
                      <li class="align-items-center">
                        <b>500GB</b> <span>File Storage</span>
                      </li>
                      <li class="align-items-center my-2">
                        <b>Unlimited</b> <span>Users</span>
                      </li>
                      <li class="align-items-center">
                        <b>No time</b> <span>Tracking</span>
                      </li>
                    </ul>
                  </div>
                  <div class="card-footer bg-transparent position-relative">
                    <button class="btn bg-white text-dark">Request a demo</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- END Pricing w/ 2 cards & nav tabs -->
Copy
<section class="py-3">
  <div class="bg-gradient-primary position-relative">
    <div class="container pb-lg-9 pb-10 pt-7 postion-relative z-index-2">
      <div class="row">
        <div class="col-md-6 mx-auto text-center">
          <h3 class="text-white">See our pricing</h3>
          <p class="text-white">You have Free Unlimited Updates and Premium Support on each package.</p>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-6 col-7 mx-auto text-center">
          <div class="nav-wrapper mt-5 position-relative z-index-2">
            <ul class="nav nav-pills nav-fill flex-row p-1 rounded-pill" id="tabs-pricing" role="tablist">
              <li class="nav-item">
                <a class="nav-link mb-0 active rounded-pill" id="tabs-iconpricing-tab-1" data-bs-toggle="tab" href="#monthly" role="tab" aria-controls="monthly" aria-selected="true">
                  Monthly
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link mb-0 rounded-pill" id="tabs-iconpricing-tab-2" data-bs-toggle="tab" href="#annual" role="tab" aria-controls="annual" aria-selected="false">
                  Annual
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-n8">
    <div class="container">
      <div class="tab-content tab-space">
        <div class="tab-pane active" id="monthly">
          <div class="row">
            <div class="col-lg-4 mb-lg-0 mb-4">
              <div class="card">
                <div class="card-header text-center pt-4 pb-3">
                  <span class="badge rounded-pill bg-light text-dark">Starter</span>
                  <h1 class="font-weight-bold mt-2">
                    <small>$</small>59
                  </h1>
                </div>
                <div class="card-body text-lg-start text-center pt-0">
                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">2 team members</span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">20GB Cloud storage </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-minus text-dark mt-1"></i>
                    <div>
                      <span class="ps-3">Integration help </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-minus text-dark mt-1"></i>
                    <div>
                      <span class="ps-3">Sketch Files </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-minus text-dark mt-1"></i>
                    <div>
                      <span class="ps-3">API Access </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-minus text-dark mt-1"></i>
                    <div>
                      <span class="ps-3">Complete documentation </span>
                    </div>
                  </div>

                  <a href="javascript:;" class="btn btn-icon bg-gradient-dark d-lg-block mt-3 mb-0">
                    Join
                  </a>
                </div>
              </div>
            </div>

            <div class="col-lg-4 mb-lg-0 mb-4">
              <div class="card">
                <div class="card-header text-center pt-4 pb-3">
                  <span class="badge rounded-pill bg-light text-dark">Premium</span>
                  <h1 class="font-weight-bold mt-2">
                    <small>$</small>89
                  </h1>
                </div>
                <div class="card-body text-lg-start text-center pt-0">
                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">10 team members</span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">40GB Cloud storage </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">Integration help </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">Sketch Files </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-minus text-dark mt-1"></i>
                    <div>
                      <span class="ps-3">API Access </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-minus text-dark mt-1"></i>
                    <div>
                      <span class="ps-3">Complete documentation </span>
                    </div>
                  </div>

                  <a href="javascript:;" class="btn btn-icon bg-gradient-primary d-lg-block mt-3 mb-0">
                    Try Premium
                  </a>
                </div>
              </div>
            </div>

            <div class="col-lg-4 mb-lg-0 mb-4">
              <div class="card">
                <div class="card-header text-center pt-4 pb-3">
                  <span class="badge rounded-pill bg-light text-dark">Enterprise</span>
                  <h1 class="font-weight-bold mt-2">
                    <small>$</small>99
                  </h1>
                </div>
                <div class="card-body text-lg-start text-center pt-0">
                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">Unlimited team members</span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">100GB Cloud storage </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">Integration help </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">Sketch Files </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">API Access </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <i class="fas fa-check text-success mt-1"></i>
                    <div>
                      <span class="ps-3">Complete documentation </span>
                    </div>
                  </div>

                  <a href="javascript:;" class="btn btn-icon bg-gradient-dark d-lg-block mt-3 mb-0">
                    Join
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="tab-pane" id="annual">
          <div class="row">
            <div class="col-lg-4 mb-lg-0 mb-4">
              <div class="card">
                <div class="card-header text-center pt-4 pb-3">
                  <span class="badge rounded-pill bg-light text-dark">Starter</span>
                  <h1 class="font-weight-bold mt-2">
                    <small>$</small>119
                  </h1>
                </div>
                <div class="card-body text-lg-start text-center pt-0">
                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">2 team members</span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">20GB Cloud storage </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
                      <i class="fas fa-minus"></i>
                    </div>
                    <div>
                      <span class="ps-3">Integration help </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
                      <i class="fas fa-minus"></i>
                    </div>
                    <div>
                      <span class="ps-3">Sketch Files </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
                      <i class="fas fa-minus"></i>
                    </div>
                    <div>
                      <span class="ps-3">API Access </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
                      <i class="fas fa-minus"></i>
                    </div>
                    <div>
                      <span class="ps-3">Complete documentation </span>
                    </div>
                  </div>

                  <a href="javascript:;" class="btn btn-icon bg-gradient-dark d-lg-block mt-3 mb-0">
                    Join
                    <i class="fas fa-arrow-right ms-1"></i>
                  </a>
                </div>
              </div>
            </div>

            <div class="col-lg-4 mb-lg-0 mb-4">
              <div class="card">
                <div class="card-header text-center pt-4 pb-3">
                  <span class="badge rounded-pill bg-light text-dark">Premium</span>
                  <h1 class="font-weight-bold mt-2">
                    <small>$</small>159
                  </h1>
                </div>
                <div class="card-body text-lg-start text-center pt-0">
                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">10 team members</span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">40GB Cloud storage </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">Integration help </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">Sketch Files </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
                      <i class="fas fa-minus"></i>
                    </div>
                    <div>
                      <span class="ps-3">API Access </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-secondary shadow text-center">
                      <i class="fas fa-minus"></i>
                    </div>
                    <div>
                      <span class="ps-3">Complete documentation </span>
                    </div>
                  </div>

                  <a href="javascript:;" class="btn btn-icon bg-gradient-primary d-lg-block mt-3 mb-0">
                    Try Premium
                    <i class="fas fa-arrow-right ms-1"></i>
                  </a>
                </div>
              </div>
            </div>

            <div class="col-lg-4 mb-lg-0 mb-4">
              <div class="card">
                <div class="card-header text-center pt-4 pb-3">
                  <span class="badge rounded-pill bg-light text-dark">Enterprise</span>
                  <h1 class="font-weight-bold mt-2">
                    <small>$</small>399
                  </h1>
                </div>
                <div class="card-body text-lg-start text-center pt-0">
                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">Unlimited team members</span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">100GB Cloud storage </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">Integration help </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">Sketch Files </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">API Access </span>
                    </div>
                  </div>

                  <div class="d-flex justify-content-lg-start justify-content-center p-2">
                    <div class="icon icon-shape icon-xs rounded-circle bg-gradient-success shadow text-center">
                      <i class="fas fa-check opacity-10"></i>
                    </div>
                    <div>
                      <span class="ps-3">Complete documentation </span>
                    </div>
                  </div>

                  <a href="javascript:;" class="btn btn-icon bg-gradient-dark d-lg-block mt-3 mb-0">
                    Join
                    <i class="fas fa-arrow-right ms-1"></i>
                  </a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</section>
Copy
<section class="py-md-7">
  <div class="container">
    <div class="row">
      <div class="col-md-8 mx-auto text-center">
        <h3>Pick the best plan for you</h3>
        <p>You have Free Unlimited Updates and Premium Support on each package.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-5 col-md-8 col-12 mx-auto text-center">
        <div class="nav-wrapper mt-5">
          <ul class="nav nav-pills nav-fill flex-row p-1 rounded-pill" id="tabs-pricing" role="tablist">
            <li class="nav-item">
              <a class="nav-link rounded-pill mb-0 active" id="tabs-iconpricing-tab-1" data-bs-toggle="tab" href="#tabs-pricing-tab-1" role="tab" aria-selected="true">
                Annual
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link rounded-pill mb-0" id="tabs-iconpricing-tab-2" data-bs-toggle="tab" href="#tabs-pricing-tab-2" role="tab" aria-selected="false">
                Monthly
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
        <div class="card shadow-none h-100">
          <div class="card-header text-sm-start text-center pt-4 pb-3 px-4">
            <h5 class="mb-1">Starter</h5>
            <p class="mb-3 text-sm">Free access for 2 members</p>
            <h3 class="font-weight-bold mt-3">
              $199 <small class="text-sm text-secondary font-weight-bold">/ year</small>
            </h3>
            <a href="javascript:;" class="btn  bg-gradient-dark w-100 rounded-pill mt-4 mb-2">Buy now</a>
          </div>
          <hr class="horizontal dark my-0">
          <div class="card-body">
            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm">Complete documentation</span>
              </div>
            </div>

            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm">Working materials in Sketch</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
        <div class="card shadow-none h-100">
          <div class="card-header text-sm-start text-center pt-4 pb-3 px-4">
            <h5 class="mb-1">Pro</h5>
            <p class="mb-3 text-sm">Free access for 30 members</p>
            <h3 class="font-weight-bold mt-3">
              $299 <small class="text-sm text-secondary font-weight-bold">/ year</small>
            </h3>
            <a href="javascript:;" class="btn  bg-gradient-dark w-100 rounded-pilld mt-4 mb-2">Buy now</a>
          </div>
          <hr class="horizontal dark my-0">
          <div class="card-body">
            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm">Complete documentation</span>
              </div>
            </div>

            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm">Working materials in Sketch</span>
              </div>
            </div>

            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm">2GB cloud storage</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
        <div class="card shadow-none bg-gradient-dark h-100 overflow-hidden">
          <div class="card-header bg-transparent text-sm-start text-center pt-4 pb-3 px-4">
            <h5 class="mb-1 text-white">Premium</h5>
            <p class="mb-3 text-sm text-white">Free access for 200 members</p>
            <h3 class="font-weight-bold mt-3 text-white">
              $499 <small class="text-sm text-secondary font-weight-bold">/ year</small>
            </h3>
            <a href="javascript:;" class="btn  shadow-none btn-white w-100 rounded-pill mt-4 mb-2">Buy now</a>
          </div>
          <hr class="horizontal light my-0">
          <div class="card-body">
            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm text-white">Complete documentation</span>
              </div>
            </div>

            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm text-white">Working materials in Sketch</span>
              </div>
            </div>

            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm text-white">20GB cloud storage</span>
              </div>
            </div>

            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm text-white">100 team members</span>
              </div>
            </div>

          </div>
        </div>
      </div>

      <div class="col-lg-3 col-sm-6 mb-lg-0 mb-4">
        <div class="card shadow-none h-100">
          <div class="card-header text-sm-start text-center pt-4 pb-3 px-4">
            <h5 class="mb-1">Enterprise</h5>
            <p class="mb-3 text-sm">Free access for all members</p>
            <h3 class="font-weight-bold mt-3">
              $899 <small class="text-sm text-secondary font-weight-bold">/ year</small>
            </h3>
            <a href="javascript:;" class="btn  bg-gradient-dark w-100 rounded-pill mt-4 mb-2">Buy now</a>
          </div>
          <hr class="horizontal dark my-0">
          <div class="card-body">
            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm">Complete documentation</span>
              </div>
            </div>

            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm">Working materials in Sketch</span>
              </div>
            </div>

            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm">100GB cloud storage</span>
              </div>
            </div>

            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm">500 team members</span>
              </div>
            </div>

            <div class="d-flex pb-3">
              <div>
                <i class="fas fa-check text-success text-sm"></i>
              </div>
              <div class="ps-3">
                <span class="text-sm">Premium support</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<section class="py-lg-7 bg-light">
  <div class="container">
    <div class="row">
      <div class="col-md-6 mx-auto text-center mb-5">
        <h2>Best no-tricks pricing</h2>
        <p class="lead">If you&#39;re not satisfied, contact us within the first 30 days and we&#39;ll send you a full refund.</p>
      </div>
    </div>
    <div class="row">
      <div class="card">
       <div class="row">
          <div class="col-lg-8">
             <div class="card-body">
                <h3 class="text-info">Lifetime Membership</h3>
                <p>You have Free Unlimited Updates and Premium Support on each package. You also have 30 days to request a refund.</p>
                <div class="row mt-5 mb-2">
                   <div class="col-lg-3 col-12">
                      <h6 class="text-dark tet-uppercase">What&#39;s included</h6>
                   </div>
                   <div class="col-6">
                      <hr class="horizontal dark">
                   </div>
                </div>
                <div class="row">
                   <div class="col-lg-6 col-md-6 col-12 ps-0">
                      <div class="d-flex align-items-center p-2">
                         <i class="fas fa-check text-dark"></i>
                         <div>
                            <span class="ps-2">Private code access</span>
                         </div>
                      </div>
                      <div class="d-flex align-items-center p-2">
                         <i class="fas fa-check text-dark"></i>
                         <div>
                            <span class="ps-2">Free entry to all repositories</span>
                         </div>
                      </div>
                   </div>
                   <div class="col-lg-6 col-md-6 col-12 ps-sm-2 ps-0">
                      <div class="d-flex align-items-center p-2">
                         <i class="fas fa-check text-dark"></i>
                         <div>
                            <span class="ps-2">Pro member accounts</span>
                         </div>
                      </div>
                      <div class="d-flex align-items-center p-2">
                         <i class="fas fa-check text-dark"></i>
                         <div>
                            <span class="ps-2">Support team full assist</span>
                         </div>
                      </div>
                   </div>
                </div>
             </div>
          </div>
          <div class="col-lg-4 my-auto">
             <div class="card-body text-center">
                <h6 class="mt-sm-4 mt-0 mb-0">Pay once, own it forever</h6>
                <h1 class="mt-0">
                   <small>$</small>399
                </h1>
                <button type="button" class="btn bg-gradient-info btn-lg mt-2">Get Access</button>
                <p class="text-sm">Get a free sample (20MB)</p>
             </div>
          </div>
       </div>
    </div>
    </div>
  </div>
</section>
Copy
<section class="py-3">
  <div class="bg-gradient-dark position-relative">
    <div class="container pb-lg-9 pb-7 pt-7 postion-relative z-index-2">
      <div class="row">
        <div class="col-md-8 mx-auto text-center">
          <span class="badge bg-info mb-2">Pricing</span>
          <h3 class="text-white">See our pricing</h3>
          <p class="text-white">You have Free Unlimited Updates and Premium Support on each package.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-n8">
    <div class="container">
      <div class="row">
        <div class="col-lg-3 mb-lg-auto mb-4 my-auto p-md-0 ms-auto">
          <div class="card border-radius-top-end-lg-0 border-radius-bottom-end-lg-0">
            <div class="card-header text-center pt-4 pb-3">
              <h6 class="text-dark opacity-8 text mb-0">Starter</h6>
              <h1 class="font-weight-bolder">
                <small>$</small>199
              </h1>
            </div>
            <div class="card-body mx-auto pt-0">
              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Complete documentation</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Working materials in Sketch</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">500MB cloud storage</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Lite support</span>
                </div>
              </div>
            </div>
            <div class="card-footer pt-0">
              <a href="javascript:;" class="btn w-100 bg-gradient-dark mb-0">
                Buy now
              </a>
            </div>
          </div>
        </div>

        <div class="col-lg-3 p-md-0 mb-lg-auto mb-4 z-index-2">
          <div class="card">
            <div class="card-header text-center pt-4 pb-3">
              <h6 class="text-dark opacity-8 text mb-0 mt-2">Pro</h6>
              <h1 class="font-weight-bolder">
                <small>$</small>299
              </h1>
            </div>
            <div class="card-body mx-auto pt-0">
              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Complete documentation</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Working materials in Sketch</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">100GB cloud storage</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">500 team members</span>
                </div>
              </div>

              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Premium support</span>
                </div>
              </div>
            </div>
            <div class="card-footer pt-0">
              <a href="javascript:;" class="btn btn-icon bg-gradient-info d-block mb-0">
                Try Pro
              </a>
            </div>
          </div>
        </div>

        <div class="col-lg-3 mb-lg-auto mb-4 my-auto p-md-0 me-auto">
          <div class="card border-radius-top-start-lg-0 border-radius-bottom-start-lg-0">
            <div class="card-header text-center pt-4 pb-2">
              <h6 class="text-dark opacity-8 text mb-0">Premium</h6>
              <h1 class="font-weight-bolder">
                <small>$</small>399
              </h1>
            </div>
            <div class="card-body mx-auto pt-0">
              <div class="justify-content-start d-flex px-2 py-1 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Complete documentation</span>
                </div>
              </div>
              <div class="justify-content-start d-flex px-2 py-1 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Working materials in Sketch</span>
                </div>
              </div>
              <div class="justify-content-start d-flex px-2 py-1 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">2GB cloud storage</span>
                </div>
              </div>
              <div class="justify-content-start d-flex px-2 py-1">
                <div>
                  <i class="fas fa-check text-info text-sm"></i>
                </div>
                <div class="ps-2">
                  <span class="text-sm">Premium support</span>
                </div>
              </div>
            </div>
            <div class="card-footer pt-0">
              <a href="javascript:;" class="btn w-100 bg-gradient-dark mb-0">Buy now</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<section class="py-5 bg-dark position-relative overflow-hidden">
  <div class="container py-7 postion-relative z-index-2">
    <div class="col-lg-6 col-md-8 mx-auto text-center mb-5">
      <h3 class="text-white">Pick the best plan for you</h3>
      <p class="text-white opacity-6">You have Free Unlimited Updates and Premium Support on each package.</p>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-6 ms-lg-auto mb-sm-0 mb-5">
        <div class="card text-center">
          <div class="card-header bg-transparent">
            <h5 class="mt-4 mb-2">Freelancer</h5>
            <h2>
              $29 <small class="text-sm text-secondary font-weight-bold">/ month</small>
            </h2>
          </div>
          <div class="card-body">
            <ul class="list-unstyled max-width-200 mx-auto">
              <li>
                <b>10</b> Projects
              </li>
              <hr class="horizontal dark">
              <li>
                <b>1</b> Team Members
              </li>
              <hr class="horizontal dark">
              <li>
                <b>5</b> Personal Contacts
              </li>
              <hr class="horizontal dark">
              <li>
                <b>500</b> Messages
              </li>
            </ul>
            <button type="button" class="btn bg-gradient-warning mt-4">Get Access</button>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 me-lg-auto">
        <div class="card text-center bg-gradient-warning">
          <div class="card-header bg-transparent">
            <h5 class="mt-4 mb-2 text-white">Startup</h5>
            <h2 class="text-white">
              $49 <small class="text-sm">/ month</small>
            </h2>
          </div>
          <div class="card-body">
            <ul class="list-unstyled max-width-200 mx-auto text-white">
              <li>
                <b>100</b> Projects
              </li>
              <hr class="horizontal light">
              <li>
                <b>25</b> Team Members
              </li>
              <hr class="horizontal light">
              <li>
                <b>15</b> Personal Contacts
              </li>
              <hr class="horizontal light">
              <li>
                <b>5K</b> Messages
              </li>
            </ul>
            <button type="button" class="btn btn-white mt-4">Get Access</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
Copy
<section class="py-4 bg-gray-100">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-md-8 mx-auto text-center">
        <h3>Pick the best plan for you</h3>
        <p>You have Free Unlimited Updates and Premium Support on each package.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-4 col-md-6 col-8 mx-auto mt-4 mb-3">
        <div class="nav-wrapper">
          <ul class="nav nav-pills rounded-pill nav-fill p-1" id="tabs-pricing" role="tablist">
            <li class="nav-item">
              <a class="nav-link mb-sm-3 mb-md-0 active rounded-pill" id="tabs-iconpricing-tab-1" data-bs-toggle="tab" href="#tabs-pricing-tab-1" role="tab" aria-controls="tabs-pricing-tab-1" aria-selected="true">
                Annual
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link mb-sm-3 mb-md-0 rounded-pill" id="tabs-iconpricing-tab-2" data-bs-toggle="tab" href="#tabs-pricing-tab-2" role="tab" aria-controls="tabs-pricing-tab-2" aria-selected="false">
                Monthly
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row mt-5">
      <div class="col-lg-4 col-md-6">
        <div class="card card-pricing">
          <div class="card-header bg-gradient-dark text-center py-4 position-relative">
            <div class="z-index-1 position-relative">
              <h5 class="text-white">Freelancer</h5>
              <h1 class="text-white mt-2 mb-0">
                <small>$</small>199</h1>
              <h6 class="text-white">per year</h6>
            </div>
          </div>
          <div class="card-body text-center">
            <ul class="list-unstyled max-width-200 mx-auto">
              <li>
                <b>10</b> Projects
                <hr class="horizontal dark">
              </li>
              <li>
                <b>1</b> Team Members
                <hr class="horizontal dark">
              </li>
              <li>
                <b>5</b> Personal Contacts
                <hr class="horizontal dark">
              </li>
              <li>
                <b>500</b> Messages
              </li>
            </ul>
            <a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
              Get started
            </a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 mt-5 mt-sm-0 ">
        <div class="card card-pricing">
          <div class="card-header bg-gradient-primary text-center py-4 position-relative">
            <div class="z-index-1 position-relative">
              <h5 class="text-white">Startup</h5>
              <h1 class="text-white mt-2 mb-0">
                <small>$</small>349</h1>
              <h6 class="text-white">per year</h6>
            </div>
          </div>
          <div class="card-body text-center">
            <ul class="list-unstyled max-width-200 mx-auto">
              <li>
                <b>10</b> Projects
                <hr class="horizontal dark">
              </li>
              <li>
                <b>1</b> Team Members
                <hr class="horizontal dark">
              </li>
              <li>
                <b>5</b> Personal Contacts
                <hr class="horizontal dark">
              </li>
              <li>
                <b>500</b> Messages
              </li>
            </ul>
            <a href="javascript:;" class="btn bg-gradient-primary w-100 mt-4 mb-0">
              Get started
            </a>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 mt-5 mt-lg-0 mx-md-auto">
        <div class="card card-pricing">
          <div class="card-header bg-gradient-dark text-center py-4 position-relative">
            <div class="z-index-1 position-relative">
              <h5 class="text-white">Company</h5>
              <h1 class="text-white mt-2 mb-0">
                <small>$</small>779</h1>
              <h6 class="text-white">per year</h6>
            </div>
          </div>
          <div class="card-body text-center">
            <ul class="list-unstyled max-width-200 mx-auto">
              <li>
                <b>10</b> Projects
                <hr class="horizontal dark">
              </li>
              <li>
                <b>1</b> Team Members
                <hr class="horizontal dark">
              </li>
              <li>
                <b>5</b> Personal Contacts
                <hr class="horizontal dark">
              </li>
              <li>
                <b>500</b> Messages
              </li>
            </ul>
            <a href="javascript:;" class="btn bg-gradient-dark w-100 mt-4 mb-0">
              Get started
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>