→ Anonymous
→ Three-Column Pricing Comparison Table

Three-Column Pricing Comparison Table

This Example is contributed by Anonymous, on 08-Apr-2025. It is responsive. similar terms for this example are Subscription Plan,Pricing Tier,Pricing Table,Pricing,Service rates,Subscription plans

Subscription Pricing Card Feature Comparison Tiered Package

Author Anonymous

Fork Fullscreen

<div class="pricing-container">
  <div class="pricing-card">
    <div class="pricing-header">
      <h3>Basic</h3>
      <div class="price">
        <span class="currency">$</span>
        <span class="amount">19</span>
        <span class="period">/month</span>
      </div>
    </div>
    <div class="pricing-features">
      <ul>
        <li>1 User</li>
        <li>10 Projects</li>
        <li>5GB Storage</li>
        <li>Basic Support</li>
        <li class="unavailable">API Access</li>
        <li class="unavailable">Custom Branding</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn">Get Started</button>
    </div>
  </div>
  
  <div class="pricing-card popular">
    <div class="popular-badge">Most Popular</div>
    <div class="pricing-header">
      <h3>Pro</h3>
      <div class="price">
        <span class="currency">$</span>
        <span class="amount">49</span>
        <span class="period">/month</span>
      </div>
    </div>
    <div class="pricing-features">
      <ul>
        <li>5 Users</li>
        <li>50 Projects</li>
        <li>50GB Storage</li>
        <li>Priority Support</li>
        <li>API Access</li>
        <li class="unavailable">Custom Branding</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn">Get Started</button>
    </div>
  </div>
  
  <div class="pricing-card">
    <div class="pricing-header">
      <h3>Enterprise</h3>
      <div class="price">
        <span class="currency">$</span>
        <span class="amount">99</span>
        <span class="period">/month</span>
      </div>
    </div>
    <div class="pricing-features">
      <ul>
        <li>Unlimited Users</li>
        <li>Unlimited Projects</li>
        <li>500GB Storage</li>
        <li>24/7 Support</li>
        <li>API Access</li>
        <li>Custom Branding</li>
      </ul>
    </div>
    <div class="pricing-footer">
      <button class="btn">Get Started</button>
    </div>
  </div>
</div>

Related Examples

Didn't find component you were looking for?

Search from 500+ components