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

<section class="pricing-table-5 my-3" aria-label="pricing-table-5">
  <div class="container py-4">
    <div class="row mb-4 align-items-center">
      <div class="col-lg-6 col-xl-5">
        <div class=" ">
          <div>
            <h2 class="fw-bolder">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h2>
          </div>
        </div>
      </div>
      <div class="col-lg-6 offset-xl-1">
        <div class=" opacity-50">
          <div>
            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;</p>
          </div>
        </div>
      </div>
    </div>

    <div class="row g-4 g-xxl-5">
      <div class="col-lg-4">
        <div class=" card h-100 p-4 py-xl-6 shadow border-0">
          <div class="card-body d-flex flex-column justify-content-between">
            <div>
              <div class=" mb-2">
                <div>
                  <p class="opacity-50 mb-0 ls-3">Basic</p>

                </div>
              </div>
              <div class=" mb-4">
                <h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">$29</h3>
                <span class="opacity-50" editable="inline">/ month</span>
              </div>
              <div class=" mb-2">
                <div>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p> Nunc et metus id ligula malesuada placerat sit amet quis enim.</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p> Aliquam erat volutpat.&nbsp;</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p class="text-decoration-line-through"> In pellentesque scelerisque auctor.&nbsp;</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p class="text-decoration-line-through"> Ut porta lacus eget nisi fermentum lobortis.</p>
                </div>
              </div>

            </div>
            <div class="d-grid">
              <a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 ">
        <div class=" card h-100 p-4 py-xl-6 shadow border-0 bg-dark text-light">
          <div class="card-body d-flex flex-column justify-content-between">
            <div>
              <div class=" mb-2">
                <div>
                  <p class="opacity-50 mb-0 ls-3">Standard</p>

                </div>
              </div>
              <div class=" mb-4">
                <h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">$59</h3>
                <span class="opacity-50" editable="inline">/ month</span>
              </div>
              <div class=" mb-2">
                <div>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p> Nunc et metus id ligula malesuada placerat sit amet quis enim.</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p> Aliquam erat volutpat.&nbsp;</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p> In pellentesque scelerisque auctor.&nbsp;</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p class="text-decoration-line-through"> Ut porta lacus eget nisi fermentum lobortis.</p>
                </div>
              </div>





            </div>
            <div class=" d-grid">
              <a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
            </div>
          </div>
        </div>
      </div>

      <div class="col-lg-4">
        <div class=" card h-100 p-4 py-xl-6 shadow border-0">
          <div class="card-body d-flex flex-column justify-content-between">
            <div>
              <div class=" mb-2">
                <div>
                  <p class="opacity-50 mb-0 ls-3">Premium</p>

                </div>
              </div>
              <div class=" mb-4">
                <h3 editable="inline" class="fw-bolder d-inline rfs-30 ls-n2">$199</h3>
                <span class="opacity-50" editable="inline">/ month</span>
              </div>
              <div class=" mb-2">
                <div>
                  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.&nbsp;</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p> Nunc et metus id ligula malesuada placerat sit amet quis enim.</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p> Aliquam erat volutpat.&nbsp;</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p> In pellentesque scelerisque auctor.&nbsp;</p>
                </div>
              </div>
              <div class=" mb-2">
                <div>
                  <p> Ut porta lacus eget nisi fermentum lobortis.</p>
                </div>
              </div>





            </div>
            <div class=" d-grid">
              <a class="btn btn-primary btn-lg" href="#" role="button">Subscribe</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>