→ Alexandra Sinclair
→ Clean Tiered Pricing Table with Monthly ...

Clean Tiered Pricing Table with Monthly and Annual Options

A clean, responsive pricing table that showcases tiered plans with toggle between monthly and annual billing options.

This Example is contributed by Alexandra Sinclair, on 02-Mar-2025. It is responsive. similar terms for this example are Theme Toggle,Toggle,Toggle Button

Toggle switch Subscription Feature Comparison

Author Alexandra Sinclair

Fork Fullscreen

<div class="pricing-container">
  <div class="pricing-header">
    <h2>Simple, Transparent Pricing</h2>
    <p>Choose the plan that works best for you</p>
    <div class="pricing-toggle">
      <span>Monthly</span>
      <label class="switch">
        <input type="checkbox" id="billing-toggle">
        <span class="slider round"></span>
      </label>
      <span>Annual <span class="discount">Save 20%</span></span>
    </div>
  </div>
  
  <div class="pricing-grid">
    <div class="pricing-card">
      <div class="card-header">
        <h3>Starter</h3>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount monthly">19</span>
          <span class="amount annual">15</span>
          <span class="period">/month</span>
        </div>
        <p>Perfect for individuals and small projects</p>
      </div>
      <div class="card-features">
        <ul>
          <li><span class="check">✓</span> 5 Projects</li>
          <li><span class="check">✓</span> 20GB Storage</li>
          <li><span class="check">✓</span> Basic Analytics</li>
          <li><span class="check">✓</span> 24/7 Support</li>
          <li class="unavailable"><span class="cross">×</span> Advanced Features</li>
        </ul>
      </div>
      <div class="card-footer">
        <button class="btn">Get Started</button>
      </div>
    </div>
    
    <div class="pricing-card popular">
      <div class="popular-badge">Most Popular</div>
      <div class="card-header">
        <h3>Professional</h3>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount monthly">49</span>
          <span class="amount annual">39</span>
          <span class="period">/month</span>
        </div>
        <p>Ideal for growing businesses and teams</p>
      </div>
      <div class="card-features">
        <ul>
          <li><span class="check">✓</span> 15 Projects</li>
          <li><span class="check">✓</span> 50GB Storage</li>
          <li><span class="check">✓</span> Advanced Analytics</li>
          <li><span class="check">✓</span> 24/7 Priority Support</li>
          <li><span class="check">✓</span> Advanced Features</li>
        </ul>
      </div>
      <div class="card-footer">
        <button class="btn btn-primary">Get Started</button>
      </div>
    </div>
    
    <div class="pricing-card">
      <div class="card-header">
        <h3>Enterprise</h3>
        <div class="price">
          <span class="currency">$</span>
          <span class="amount monthly">99</span>
          <span class="amount annual">79</span>
          <span class="period">/month</span>
        </div>
        <p>For large organizations with advanced needs</p>
      </div>
      <div class="card-features">
        <ul>
          <li><span class="check">✓</span> Unlimited Projects</li>
          <li><span class="check">✓</span> 100GB Storage</li>
          <li><span class="check">✓</span> Custom Analytics</li>
          <li><span class="check">✓</span> 24/7 VIP Support</li>
          <li><span class="check">✓</span> Premium Features</li>
        </ul>
      </div>
      <div class="card-footer">
        <button class="btn">Get Started</button>
      </div>
    </div>
  </div>
</div>

Related Examples