→ Anonymous
→ Animated Skill Progress Bar

Animated Skill Progress Bar

This Example is contributed by Anonymous, on 13-Feb-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 Subscription Pricing Card Feature Comparison

Author Anonymous

Fork Fullscreen

<div class="pricing-container">
 <div class="pricing-switcher">
 <p class="fieldset">
 <input type="radio" name="duration-1" value="monthly" id="monthly-1" checked>
 <label for="monthly-1">Monthly</label>
 <input type="radio" name="duration-1" value="yearly" id="yearly-1">
 <label for="yearly-1">Yearly</label>
 <span class="switch"></span>
 </p>
 </div>
 <div class="pricing-table">
 <div class="pricing-card">
 <h3 class="pricing-card-header">Basic</h3>
 <div class="price"><span class="currency">$</span><span class="amount" data-monthly="9" data-yearly="99">9</span><span class="duration">/mo</span></div>
 <ul class="features">
 <li>10GB Storage</li>
 <li>1 User</li>
 <li>Email Support</li>
 </ul>
 <button class="cta-button">Get Started</button>
 </div>
 <div class="pricing-card popular">
 <h3 class="pricing-card-header">Pro</h3>
 <div class="price"><span class="currency">$</span><span class="amount" data-monthly="19" data-yearly="199">19</span><span class="duration">/mo</span></div>
 <ul class="features">
 <li>50GB Storage</li>
 <li>5 Users</li>
 <li>Priority Email Support</li>
 <li>Phone Support</li>
 </ul>
 <button class="cta-button">Get Started</button>
 </div>
 <div class="pricing-card">
 <h3 class="pricing-card-header">Enterprise</h3>
 <div class="price"><span class="currency">$</span><span class="amount" data-monthly="49" data-yearly="499">49</span><span class="duration">/mo</span></div>
 <ul class="features">
 <li>Unlimited Storage</li>
 <li>Unlimited Users</li>
 <li>24/7 Support</li>
 <li>Dedicated Account Manager</li>
 </ul>
 <button class="cta-button">Get Started</button>
 </div>
 </div>
</div>

Related Examples