Free Section
Pricing Cards with Annual Toggle
A 3-tier SaaS pricing section with an interactive monthly/annual discount switch (Save 20%) and highlighted featured card.
Colours in this gradient
#090d16#2563eb#10b981#ffffff
background: ;The code
Plain HTML, CSS and JavaScript with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.
<section class="pt-sec">
<div class="pt-header">
<span class="pt-badge">Transparent Pricing</span>
<h2>Simple plans for teams of every size</h2>
<p>Deploy for free today. Upgrade when your throughput demands dedicated clusters.</p>
<div class="pt-toggle-row">
<span class="pt-lbl is-active" id="ptMonthlyLbl">Monthly</span>
<div class="pt-switch" id="ptSwitch">
<div class="pt-thumb"></div>
</div>
<span class="pt-lbl" id="ptAnnualLbl">Annual</span>
<span class="pt-discount">SAVE 20%</span>
</div>
</div>
<div class="pt-cards">
<div class="pt-card">
<div class="pt-tier">Developer</div>
<div class="pt-price"><span class="price-val" data-m="0" data-a="0">$0</span><small>/mo</small></div>
<p class="pt-desc">Everything needed for personal side projects and hobby apps.</p>
<button class="pt-btn btn-outline">Deploy Free</button>
</div>
<div class="pt-card pt-featured">
<div class="pt-pop">Most Popular</div>
<div class="pt-tier">Pro Team</div>
<div class="pt-price"><span class="price-val" data-m="49" data-a="39">$49</span><small>/mo</small></div>
<p class="pt-desc">High performance edge storage with automated failover clusters.</p>
<button class="pt-btn btn-blue">Upgrade to Pro</button>
</div>
<div class="pt-card">
<div class="pt-tier">Scale</div>
<div class="pt-price"><span class="price-val" data-m="199" data-a="159">$199</span><small>/mo</small></div>
<p class="pt-desc">Dedicated single-tenant infrastructure with custom SLA guarantees.</p>
<button class="pt-btn btn-outline">Scale Now</button>
</div>
</div>
</section>The AI prompt
Paste this into an AI coding tool to generate the same section, then ask it to adapt the colours, text or framework to your project.
Create a responsive 3-tier SaaS pricing section with an interactive monthly/annual discount toggle switch in HTML, CSS and vanilla JavaScript. Requirements: - 3 pricing tiers (Developer $0, Pro Team $49, Scale $199). - Monthly / Annual toggle switch with "SAVE 20%" discount badge. - When toggled to annual, prices update dynamically to discounted values ($39/mo, $159/mo). - Featured tier with blue gradient accent and "Most Popular" floating pill. Return one HTML file with <style> and <script> tags.
How to build it, step by step
- 1
Store monthly and annual rate in data-m and data-a attributes on price values.
- 2
Add click event on toggle switch to update price textContent dynamically.
- 3
Add .is-annual class to translate switch thumb and update active label colors.
Customisation tips
- Keep price updates synchronous to prevent layout shifts during interaction.