→ Anonymous
→ Subscription Pricing Tiers for SaaS Prod...

Subscription Pricing Tiers for SaaS Products

This Example is contributed by Anonymous, on 27-Mar-2025. It is responsive. similar terms for this example are Theme Toggle,Toggle,Toggle Button,Subscription Plan,Pricing Tier,Pricing Table,Pricing,Service rates,Subscription plans

Toggle switch Pricing Card Card Layout

Author Anonymous

Fork Fullscreen

<section class="pricing-section">
  <div class="pricing-header">
    <h2>Choose the right plan for you</h2>
    <p>All plans include a 14-day free trial. No credit card required.</p>
    <div class="pricing-toggle">
      <span>Monthly</span>
      <label class="switch">
        <input type="checkbox" id="billing-toggle">
        <span class="slider"></span>
      </label>
      <span>Annual <span class="discount">Save 20%</span></span>
    </div>
  </div>
  
  <div class="pricing-container">
    <div class="pricing-card">
      <div class="pricing-card-header">
        <h3>Basic</h3>
        <div class="price">
          <span class="amount" data-monthly="19" data-annual="15">$19</span>
          <span class="period">/month</span>
        </div>
        <p>Perfect for individuals and small projects</p>
      </div>
      <div class="pricing-card-features">
        <ul>
          <li>5 Projects</li>
          <li>10GB Storage</li>
          <li>Basic Analytics</li>
          <li>24/7 Support</li>
        </ul>
      </div>
      <div class="pricing-card-cta">
        <button class="btn-primary">Get Started</button>
      </div>
    </div>
    
    <div class="pricing-card popular">
      <div class="popular-badge">Most Popular</div>
      <div class="pricing-card-header">
        <h3>Pro</h3>
        <div class="price">
          <span class="amount" data-monthly="49" data-annual="39">$49</span>
          <span class="period">/month</span>
        </div>
        <p>Ideal for growing teams and businesses</p>
      </div>
      <div class="pricing-card-features">
        <ul>
          <li>15 Projects</li>
          <li>50GB Storage</li>
          <li>Advanced Analytics</li>
          <li>24/7 Priority Support</li>
          <li>Team Collaboration</li>
          <li>Custom Domains</li>
        </ul>
      </div>
      <div class="pricing-card-cta">
        <button class="btn-primary">Get Started</button>
      </div>
    </div>
    
    <div class="pricing-card">
      <div class="pricing-card-header">
        <h3>Enterprise</h3>
        <div class="price">
          <span class="amount" data-monthly="99" data-annual="79">$99</span>
          <span class="period">/month</span>
        </div>
        <p>Advanced features for larger organizations</p>
      </div>
      <div class="pricing-card-features">
        <ul>
          <li>Unlimited Projects</li>
          <li>250GB Storage</li>
          <li>Premium Analytics</li>
          <li>24/7 VIP Support</li>
          <li>Advanced Collaboration</li>
          <li>Custom Domains</li>
          <li>Dedicated Success Manager</li>
          <li>API Access</li>
        </ul>
      </div>
      <div class="pricing-card-cta">
        <button class="btn-primary">Get Started</button>
      </div>
    </div>
  </div>
  
  <div class="pricing-footer">
    <p>Need a custom plan? <a href="#">Contact us</a> for enterprise pricing.</p>
    <div class="pricing-guarantee">
      <div class="guarantee-icon">✓</div>
      <div class="guarantee-text">
        <h4>100% Satisfaction Guarantee</h4>
        <p>Try risk-free for 14 days. Cancel anytime.</p>
      </div>
    </div>
  </div>
</section>

Related Examples