→ David Wilson
→ Pricing Tier Cards with Animated Toggle

Pricing Tier Cards with Animated Toggle

This Example is contributed by David Wilson, on 12-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 Pricing Card Subscription Plans Dynamic Content

Author David Wilson

Fork Fullscreen

<div class="pricing-card">
            <h3 class="plan-name">Basic</h3>
            <div class="price monthly-price"><span class="currency">$</span>19<span class="period">/month</span></div>
            <div class="price annual-price"><span class="currency">$</span>190<span class="period">/year</span></div>
            <ul class="features">
                <li><i class="fas fa-check"></i> 10GB Storage</li>
                <li><i class="fas fa-check"></i> Email Support</li>
                <li><i class="fas fa-times"></i> Phone Support</li>
            </ul>
            <button class="cta-button">Choose Plan</button>
        </div>
        <div class="pricing-card">
            <h3 class="plan-name">Pro</h3>
            <div class="price monthly-price"><span class="currency">$</span>49<span class="period">/month</span></div>
            <div class="price annual-price"><span class="currency">$</span>490<span class="period">/year</span></div>
            <ul class="features">
                <li><i class="fas fa-check"></i> 50GB Storage</li>
                <li><i class="fas fa-check"></i> Email & Phone Support</li>
                <li><i class="fas fa-check"></i> Advanced Analytics</li>
            </ul>
            <button class="cta-button">Choose Plan</button>
        </div>

<div class="pricing-card">
            <h3 class="plan-name">Enterprise</h3>
            <div class="price monthly-price"><span class="currency">$</span>99<span class="period">/month</span></div>
            <div class="price annual-price"><span class="currency">$</span>990<span class="period">/year</span></div>
            <ul class="features">
                <li><i class="fas fa-check"></i> Unlimited Storage</li>
                <li><i class="fas fa-check"></i> 24/7 Premium Support</li>
                <li><i class="fas fa-check"></i> Custom Integrations</li>
            </ul>
            <button class="cta-button">Choose Plan</button>
        </div>

</div>
</div>

Related Examples