Pricing: 3 plans

What you receive in Webflow

• 33 native elements and 14 classes.
• Breakpoints: tablet (991px).
• No Embed elements. Everything is native.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="price1">
  <div class="price1-inner">
    <h2 class="price1-title">Simple, transparent pricing</h2>
    <p class="price1-sub">Start free. Upgrade when you're ready.</p>
    <div class="price1-grid">
      <div class="price1-card"><h3 class="price1-plan">Starter</h3><div class="price1-price">$0<span class="price1-per">/month</span></div><ul class="price1-list"><li>1 project</li><li>Basic analytics</li><li>Community support</li></ul><a href="#" class="price1-btn">Get started</a></div>
      <div class="price1-card price1-card-featured"><div class="price1-badge">Most popular</div><h3 class="price1-plan">Pro</h3><div class="price1-price">$29<span class="price1-per">/month</span></div><ul class="price1-list"><li>Unlimited projects</li><li>Advanced analytics</li><li>Priority support</li></ul><a href="#" class="price1-btn price1-btn-primary">Start free trial</a></div>
      <div class="price1-card"><h3 class="price1-plan">Business</h3><div class="price1-price">$99<span class="price1-per">/month</span></div><ul class="price1-list"><li>Everything in Pro</li><li>SSO and audit logs</li><li>Dedicated manager</li></ul><a href="#" class="price1-btn">Contact sales</a></div>
    </div>
  </div>
</section>
<style>
.price1 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; padding:96px 24px; background:#fff; }
.price1-inner { max-width:1100px; margin:0 auto; text-align:center; }
.price1-title { font-size:40px; color:#0f172a; margin:0 0 12px; }
.price1-sub { font-size:18px; color:#64748b; margin:0 0 48px; }
.price1-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px; text-align:left; align-items:start; }
.price1-card { border:1px solid #e2e8f0; border-radius:16px; padding:32px; }
.price1-card-featured { border:2px solid #4353ff; box-shadow:0 20px 40px rgba(67,83,255,.15); }
.price1-badge { display:inline-block; background:#eef0ff; color:#4353ff; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; margin-bottom:12px; }
.price1-plan { font-size:18px; color:#0f172a; margin:0 0 12px; }
.price1-price { font-size:44px; font-weight:700; color:#0f172a; margin-bottom:20px; }
.price1-per { font-size:16px; font-weight:400; color:#64748b; }
.price1-list { padding-left:20px; margin:0 0 28px; color:#475569; line-height:2; font-size:15px; }
.price1-btn { display:block; text-align:center; padding:12px; border-radius:10px; border:1px solid #cbd5e1; color:#0f172a; text-decoration:none; font-weight:600; }
.price1-btn-primary { background:#4353ff; border-color:#4353ff; color:#fff; }
@media (max-width:991px) { .price1-grid { grid-template-columns:1fr; } }
</style>