Pricing 01

Playful cream pricing section with three chunky rounded tier cards, coral accent, pill chips and bold friendly sans CTAs.
Built withHTML/CSSTailwindCSS GridMotion
Preview
Live render at 1440px — scroll, hover and click work as they will on the real page.
Copy the code
paste-ready → Designer
<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="pricing_component">
  <div class="pricing_inner">
    <div class="pricing_chip">Simple pricing</div>
    <h2 class="pricing_title">Pick a plan that grows with you</h2>
    <p class="pricing_subtitle">No hidden fees, no surprises. Cancel anytime and keep everything you've built. Start free, upgrade when you're ready to fly.</p>
    <div class="pricing_grid">
      <div class="pricing_card">
        <h3 class="pricing_plan">Starter</h3>
        <p class="pricing_plandesc">For hobbyists testing the waters.</p>
        <div class="pricing_pricerow">
          <p class="pricing_price">$0</p>
          <p class="pricing_period">/month</p>
        </div>
        <ul class="pricing_features">
          <li class="pricing_feature">Up to 3 projects</li>
          <li class="pricing_feature">1 GB cloud storage</li>
          <li class="pricing_feature">Community support</li>
          <li class="pricing_feature">Basic templates</li>
        </ul>
        <a class="pricing_ctaghost" href="#">Start for free</a>
      </div>
      <div class="pricing_cardfeatured">
        <div class="pricing_badge">Most popular</div>
        <h3 class="pricing_planlight">Pro</h3>
        <p class="pricing_plandesclight">For creators ready to scale up.</p>
        <div class="pricing_pricerowlight">
          <p class="pricing_pricelight">$24</p>
          <p class="pricing_periodlight">/month</p>
        </div>
        <ul class="pricing_featureslight">
          <li class="pricing_featurelight">Unlimited projects</li>
          <li class="pricing_featurelight">100 GB cloud storage</li>
          <li class="pricing_featurelight">Priority email support</li>
          <li class="pricing_featurelight">Advanced analytics</li>
          <li class="pricing_featurelight">Custom branding</li>
        </ul>
        <a class="pricing_ctasolid" href="#">Get started</a>
      </div>
      <div class="pricing_card">
        <h3 class="pricing_plan">Team</h3>
        <p class="pricing_plandesc">For startups moving fast together.</p>
        <div class="pricing_pricerow">
          <p class="pricing_price">$79</p>
          <p class="pricing_period">/month</p>
        </div>
        <ul class="pricing_features">
          <li class="pricing_feature">Everything in Pro</li>
          <li class="pricing_feature">Up to 20 seats</li>
          <li class="pricing_feature">Shared workspaces</li>
          <li class="pricing_feature">Dedicated manager</li>
          <li class="pricing_feature">SSO & audit logs</li>
        </ul>
        <a class="pricing_ctaghost" href="#">Talk to sales</a>
      </div>
    </div>
  </div>
</section>

<style>
.pricing_component {
  width:100%;
  background:#fef8f0;
  padding:100px 24px;
  font-family:'Poppins',-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  box-sizing:border-box;
}

.pricing_inner {
  max-width:1140px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.pricing_chip {
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:#ffe3e4;
  color:#ff5a5f;
  font-size:13px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.12em;
  padding:8px 16px;
  border-radius:999px;
  margin-bottom:20px;
}

.pricing_title {
  color:#1a1414;
  font-size:52px;
  line-height:1.05;
  font-weight:800;
  text-align:center;
  max-width:680px;
  margin:0 0 16px;
  letter-spacing:-0.02em;
}

.pricing_subtitle {
  color:#6b615c;
  font-size:18px;
  line-height:1.6;
  text-align:center;
  max-width:520px;
  margin:0 0 56px;
}

.pricing_grid {
  width:100%;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  align-items:stretch;
}

.pricing_card {
  background:#ffffff;
  border-radius:32px;
  padding:36px;
  display:flex;
  flex-direction:column;
  border:2px solid #f0e6da;
  box-shadow:0 12px 30px rgba(26,20,20,0.04);
  box-sizing:border-box;
}

.pricing_plan {
  color:#1a1414;
  font-size:22px;
  font-weight:700;
  margin:0 0 6px;
}

.pricing_plandesc {
  color:#6b615c;
  font-size:15px;
  line-height:1.5;
  margin:0 0 24px;
}

.pricing_pricerow {
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin:0 0 28px;
}

.pricing_price {
  color:#1a1414;
  font-size:52px;
  font-weight:800;
  line-height:1;
  margin:0;
}

.pricing_period {
  color:#6b615c;
  font-size:16px;
  font-weight:500;
  margin:0 0 8px;
}

.pricing_features {
  list-style:none;
  padding:0;
  margin:0 0 32px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}

.pricing_feature {
  display:flex;
  align-items:center;
  gap:12px;
  color:#3a322f;
  font-size:15px;
}

.pricing_ctaghost {
  display:block;
  text-align:center;
  color:#1a1414;
  font-size:16px;
  font-weight:700;
  padding:16px;
  border-radius:999px;
  border:2px solid #1a1414;
  text-decoration:none;
  transition:background 0.2s,color 0.2s;
}

.pricing_cardfeatured {
  background:#1a1414;
  border-radius:32px;
  padding:36px;
  display:flex;
  flex-direction:column;
  position:relative;
  transform:scale(1.04);
  box-shadow:0 24px 50px rgba(255,90,95,0.28);
  box-sizing:border-box;
}

.pricing_badge {
  position:absolute;
  top:24px;
  right:24px;
  background:#ff5a5f;
  color:#ffffff;
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.1em;
  padding:6px 14px;
  border-radius:999px;
}

.pricing_planlight {
  color:#ffffff;
  font-size:22px;
  font-weight:700;
  margin:0 0 6px;
}

.pricing_plandesclight {
  color:#b0a6a0;
  font-size:15px;
  line-height:1.5;
  margin:0 0 24px;
}

.pricing_pricerowlight {
  display:flex;
  align-items:flex-end;
  gap:6px;
  margin:0 0 28px;
}

.pricing_pricelight {
  color:#ffffff;
  font-size:52px;
  font-weight:800;
  line-height:1;
  margin:0;
}

.pricing_periodlight {
  color:#b0a6a0;
  font-size:16px;
  font-weight:500;
  margin:0 0 8px;
}

.pricing_featureslight {
  list-style:none;
  padding:0;
  margin:0 0 32px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:1;
}

.pricing_featurelight {
  display:flex;
  align-items:center;
  gap:12px;
  color:#f0e6da;
  font-size:15px;
}

.pricing_ctasolid {
  display:block;
  text-align:center;
  color:#ffffff;
  font-size:16px;
  font-weight:700;
  padding:16px;
  border-radius:999px;
  background:#ff5a5f;
  text-decoration:none;
  transition:transform 0.2s,background 0.2s;
}
</style>
One email unlocks copying across the whole library — that's the only ask.
Want this section shipped on your site?

We install it on Webflow or Shopify — wired to your content, not a paste-and-pray.
Book a free call