The pricing plugin is used to show multiple prices in 1 section using a button. This can be used to show monthly and annual prices without using tabs and repeating content. The plugin can expanded to handle quarterly and other durations.
<section class="py-28" id="pricing">
<div class="container">
<div class="row">
<div class="col">
<h2 class="display-6 font-semibold mb-3">Our Pricing</h2>
<p>No additional costs. Pay a fixed monthly fee we handle everything for you.</p>
<div class="btn-group">
<button class="btn btn-primary rounded-none" id="monthly-pricing-button">Monthly</button>
<button class="btn btn-outline btn-primary rounded-none" id="annual-pricing-button">Annual</button>
</div>
</div>
</div>
<div class="row mt-12">
<div class="col md:w-4/12">
<h2 class="display-6 mb-3">
<span data-monthly="$120" data-annual="$83">$120</span>
<span class="text-small">/mo</span>
</h2>
</div>
</div>
</div>
</section>