→ Anonymous
→ Pricing

Pricing

This Example is contributed by Anonymous, on 26-Mar-2025. It is responsive. similar terms for this example are Card Design,Cards,Subscription Plan,Pricing Tier,Pricing Table,Pricing,Service rates,Subscription plans

Card Subscription Pricing Card

Author Anonymous

Fork Fullscreen

<div class="pricing-container">
  <div class="pricing-card">
    <h3 class="plan-name">Basic</h3>
    <div class="price-container">
      <span class="currency">$</span>
      <span class="price">10</span>
      <span class="period">/month</span>
    </div>
    <p class="plan-description">Perfect for individuals and small projects</p>
    <ul class="features-list">
      <li>5 Projects</li>
      <li>20GB Storage</li>
      <li>Up to 10 users</li>
      <li>Basic support</li>
    </ul>
    <button class="signup-btn">Get Started</button>
  </div>

<div class="pricing-card popular">
    <div class="popular-badge">Most Popular</div>
    <h3 class="plan-name">Pro</h3>
    <div class="price-container">
      <span class="currency">$</span>
      <span class="price">24</span>
      <span class="period">/month</span>
    </div>
    <p class="plan-description">Ideal for growing teams and businesses</p>
    <ul class="features-list">
      <li>15 Projects</li>
      <li>50GB Storage</li>
      <li>Up to 20 users</li>
      <li>Priority support</li>
      <li>Advanced analytics</li>
    </ul>
    <button class="signup-btn">Get Started</button>
  </div>

<div class="pricing-card">
    <h3 class="plan-name">Enterprise</h3>
    <div class="price-container">
      <span class="currency">$</span>
      <span class="price">49</span>
      <span class="period">/month</span>
    </div>
    <p class="plan-description">For large organizations and complex needs</p>
    <ul class="features-list">
      <li>Unlimited Projects</li>
      <li>200GB Storage</li>
      <li>Unlimited users</li>
      <li>24/7 dedicated support</li>
      <li>Custom analytics</li>
      <li>API access</li>
    </ul>
    <button class="signup-btn">Get Started</button>
  </div>
</div>

Related Examples