Quick Presets

Plans (3/5)

Basic - $9/month
Pro - $29/month
Enterprise - $99/month

Currency & Billing

Sizing

320px
32px
24px
48px
24px
15px

Colors

Border & Shadow

1px
16px
1.05x

Button Style

8px

Features Style

Preview

Basic

Perfect for individuals

$9/month
  • 5 Projects
  • 10GB Storage
  • Email Support
  • Basic Analytics
Most Popular

Pro

Best for small teams

$29/month
  • 25 Projects
  • 100GB Storage
  • Priority Support
  • Advanced Analytics
  • Team Collaboration
  • API Access

Enterprise

For large organizations

$99/month
  • Unlimited Projects
  • Unlimited Storage
  • 24/7 Support
  • Custom Analytics
  • Team Collaboration
  • API Access
  • SSO
  • Dedicated Manager
<div class="pricing-container">
  
  <div class="pricing-cards">

    <div class="pricing-card">
      
      <h3 class="pricing-name">Basic</h3>
      <p class="pricing-description">Perfect for individuals</p>
      <div class="pricing-price">
        <span class="currency">$</span>
        <span class="amount">9</span>
        <span class="period">/month</span>
      </div>
      <ul class="pricing-features">
        <li><span class="feature-icon">✓</span>5 Projects</li>
        <li><span class="feature-icon">✓</span>10GB Storage</li>
        <li><span class="feature-icon">✓</span>Email Support</li>
        <li><span class="feature-icon">✓</span>Basic Analytics</li>
      </ul>
      <button class="pricing-button">Get Started</button>
    </div>

    <div class="pricing-card highlighted">
      <div class="pricing-badge">Most Popular</div>
      <h3 class="pricing-name">Pro</h3>
      <p class="pricing-description">Best for small teams</p>
      <div class="pricing-price">
        <span class="currency">$</span>
        <span class="amount">29</span>
        <span class="period">/month</span>
      </div>
      <ul class="pricing-features">
        <li><span class="feature-icon">✓</span>25 Projects</li>
        <li><span class="feature-icon">✓</span>100GB Storage</li>
        <li><span class="feature-icon">✓</span>Priority Support</li>
        <li><span class="feature-icon">✓</span>Advanced Analytics</li>
        <li><span class="feature-icon">✓</span>Team Collaboration</li>
        <li><span class="feature-icon">✓</span>API Access</li>
      </ul>
      <button class="pricing-button">Get Started</button>
    </div>

    <div class="pricing-card">
      
      <h3 class="pricing-name">Enterprise</h3>
      <p class="pricing-description">For large organizations</p>
      <div class="pricing-price">
        <span class="currency">$</span>
        <span class="amount">99</span>
        <span class="period">/month</span>
      </div>
      <ul class="pricing-features">
        <li><span class="feature-icon">✓</span>Unlimited Projects</li>
        <li><span class="feature-icon">✓</span>Unlimited Storage</li>
        <li><span class="feature-icon">✓</span>24/7 Support</li>
        <li><span class="feature-icon">✓</span>Custom Analytics</li>
        <li><span class="feature-icon">✓</span>Team Collaboration</li>
        <li><span class="feature-icon">✓</span>API Access</li>
        <li><span class="feature-icon">✓</span>SSO</li>
        <li><span class="feature-icon">✓</span>Dedicated Manager</li>
      </ul>
      <button class="pricing-button">Contact Sales</button>
    </div>
  </div>
</div>