pricing-tabs

Summary

Pricing section with a centered title, a Monthly / Yearly Bootstrap tab toggle (animated sliding indicator), a hand-drawn "SAVE 35%" dashed-stroke arrow accent pointing at the toggle, and a three-card pricing grid below. Each card has icon, title, four-item feature list (with active/inactive states), price, and CTA.

HTML structure (minimal)

<div class="tp-price__area pt-110 pb-80">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-xl-7 wow tpfadeUp">
        <div class="tp-price__section-box text-center mb-35">
          <h2 class="tp-section-title">Deliver End-To-End Retail Billing & Solutions</h2>
          <p>Choose a plan tailored to your needs</p>
        </div>
      </div>
    </div>
    <div class="row wow tpfadeUp">
      <div class="col-12">
        <div class="tp-price__btn-box mb-50 d-flex justify-content-center">
          <div class="tp-price-offer-badge-wrap d-none d-sm-block">
            <div class="price-shape-line">
              <svg viewBox="0 0 80 42">
                <path d="M78.5 8.7 …" stroke="#FF3C82" stroke-dasharray="3 3"/>
              </svg>
            </div>
            <div class="price-offer-badge"><span>SAVE <br>35%</span></div>
          </div>
          <nav>
            <div class="nav nav-tab tp-price__btn-bg" role="tablist">
              <button class="nav-link active monthly" data-bs-toggle="tab" data-bs-target="#nav-home">Monthly</button>
              <button class="nav-link yearly" data-bs-toggle="tab" data-bs-target="#nav-profile">Yearly</button>
              <span class="test"></span>
            </div>
          </nav>
        </div>
      </div>
    </div>
    <div class="price-tab-content">
      <div class="tab-content" id="nav-tabContent">
        <div class="tab-pane fade show active" id="nav-home">
          <div class="row">
            <div class="col-xl-4 col-md-6 mb-30">
              <div class="tp-price__item">
                <div class="tp-price__icon"><img src="price-icon-1.png"></div>
                <div class="tp-price__title-box">
                  <h4 class="tp-price__title-sm">Personal Plan</h4>
                  <p>Customized anything in anytime</p>
                </div>
                <div class="tp-price__feature">
                  <ul>
                    <li><span><svg>◆</svg></span> Easy To Track AI Data</li>
                    <li><span><svg>◆</svg></span> 100+ Ready Boots</li>
                    <li class="inactive"><span><svg>◆</svg></span> Best Data Plan & Package</li>
                    <li class="inactive"><span><svg>◆</svg></span> 24/7 Online Support</li>
                  </ul>
                </div>
                <div class="tp-price__price"><span>$19</span><i>/per month</i></div>
                <a class="tp-btn tp-btn-hover alt-color-black"><span>Get Started</span><b></b></a>
              </div>
            </div>
            <!-- two more pricing cards -->
          </div>
        </div>
        <div class="tab-pane fade" id="nav-profile"><!-- Yearly grid --></div>
      </div>
    </div>
  </div>
</div>

Key SCSS tokens

.tp-price {
  &__btn-bg {
    background: var(--tp-grey-7);
    border-radius: 50px;
    padding: 5px;
    position: relative;
  }
  &__btn-bg .nav-link {
    border-radius: 50px;
    padding: 12px 30px;
    z-index: 2;
    transition: color .3s;
  }
  &__btn-bg .nav-link.active { color: var(--tp-common-white); }
  &__btn-bg .test {
    position: absolute;
    top: 5px; left: 5px;
    width: calc(50% - 5px); height: calc(100% - 10px);
    background: var(--tp-theme-1);
    border-radius: 50px;
    z-index: 1;
    transition: transform .35s ease;
  }
  &__btn-bg .yearly.active ~ .test { transform: translateX(100%); }

  &__item {
    background: var(--tp-common-white);
    border-radius: 20px;
    padding: 40px 35px;
    box-shadow: 0 30px 60px rgba(1, 16, 61, 0.05);
  }
  &__feature ul li.inactive { color: var(--tp-grey-2); opacity: .5; }
  &__feature ul li.inactive span svg path { fill: var(--tp-grey-2); }
}
.price-shape-line { position: absolute; top: -45px; right: 100%; }
.price-offer-badge { position: absolute; top: -55px; right: 105%; }

Animation logic

// Bootstrap's data-bs-toggle="tab" handles the panel swap.
// The sliding indicator is pure CSS — `.test` translates 100% when sibling .yearly becomes active.

Notable details

• The active tab indicator is a sibling <span class="test"> placed inside the same .nav-tab container — sliding it via CSS sibling selector gives a Material-style toggle without JavaScript.
• The "SAVE 35%" badge attaches to a hand-drawn dashed SVG arrow (stroke-dasharray "3 3") that points diagonally toward the toggle — playful editorial accent on an otherwise corporate pricing block.
• Inactive feature rows (<li class="inactive">) dim the text and the icon fill via a single class swap.

Use when

• SaaS pricing pages that need a Monthly/Yearly toggle with a smooth sliding indicator.
• Pricing blocks where you want to highlight the discount visually (the dashed arrow + badge).
• Three-tier pricing layouts with mixed active/inactive feature rows.

Caveats

• Tab swap depends on Bootstrap 5 JS bundle (bootstrap.bundle.min.js).
• The .test indicator assumes exactly two tabs; for three-tier toggles you need to extend the CSS.