Dual Plan Pricing
Overview
Monthly and lifetime price cards side by side: large prices with struck-through list prices, feature lists with a line icon and blue check on every row, and billing and term conditions at the bottom. The recommended plan stands out with a light blue gradient, heavier border and primary button.
Taken from the page template Chengbang App Market Intelligence Home. Use it on its own, or combine it with the other components from the same template to rebuild the full page.
Plain HTML, CSS and a little vanilla JS, with no framework dependency. Copy the prompt into Claude Code, Cursor, Trae or Codex and the model adds Dual Plan Pricing to your project in your colors.
Where to use it
SaaS pricing pages, upgrade dialogs, plan comparisons and monthly / yearly toggles.
Install
With Builder, install it with the 8pt CLI or call it directly from an editor connected to 8pt MCP.
$ npm i -g @8pt-dev/cli && 8pt add dual-plan-pricing
mcp › Use 8pt MCP to call get_component("dual-plan-pricing")
Code
Source for Dual Plan Pricing. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-dpp"><div class="dpp-grid"><div class="dpp-p "><div class="dpp-n"><b>月付</b></div><p class="dpp-sub">按月计费，随时取消。</p><div class="dpp-pr"><strong>¥199</strong><s>¥399</s></div><p class="dpp-u">/月 · 早鸟价</p><a href="#" class="dpp-btn">开通澄榜 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M9 7h8v8"/></svg></a><h6>功能</h6><ul><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="6" height="6"/><rect x="14" y="4" width="6" height="6"/><rect x="4" y="14" width="6" height="6"/><rect x="14" y="14" width="6" height="6"/></svg>应用目录：双端商店<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20V10M12 20V4M19 20v-7"/></svg>收入与下载估算<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10v5a5 5 0 0 1-10 0zM12 14v4M8 20h8"/></svg>榜单、评分与筛选<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10v4h3l6 4V6L7 10z"/></svg>广告与素材<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h5a3 3 0 0 1 3 3v7"/></svg>付费流程与竞品<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v5M15 3v5M7 8h10v3a5 5 0 0 1-10 0zM12 16v5"/></svg>API 与 MCP<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li></ul><h6>条件</h6><dl><div><dt>计费</dt><dd>按月</dd></div><div><dt>7 天退款保障</dt><dd><i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></dd></div><div><dt>使用期</dt><dd>订阅期内</dd></div></dl></div><div class="dpp-p hot"><div class="dpp-n"><b>终身</b><span class="dpp-badge">更划算</span></div><p class="dpp-sub">一次付清，长期使用。</p><div class="dpp-pr"><strong>¥699</strong><s>¥1399</s></div><p class="dpp-u">一次性 · 早鸟价</p><a href="#" class="dpp-btn">开通澄榜 <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 17L17 7M9 7h8v8"/></svg></a><h6>功能</h6><ul><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="6" height="6"/><rect x="14" y="4" width="6" height="6"/><rect x="4" y="14" width="6" height="6"/><rect x="14" y="14" width="6" height="6"/></svg>应用目录：双端商店<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 20V10M12 20V4M19 20v-7"/></svg>收入与下载估算<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10v5a5 5 0 0 1-10 0zM12 14v4M8 20h8"/></svg>榜单、评分与筛选<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10v4h3l6 4V6L7 10z"/></svg>广告与素材<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h5a3 3 0 0 1 3 3v7"/></svg>付费流程与竞品<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3v5M15 3v5M7 8h10v3a5 5 0 0 1-10 0zM12 16v5"/></svg>API 与 MCP<i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></li></ul><h6>条件</h6><dl><div><dt>计费</dt><dd>一次付清</dd></div><div><dt>7 天退款保障</dt><dd><i><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg></i></dd></div><div><dt>使用期</dt><dd>长期</dd></div></dl></div></div></div>
.x-dpp{--ink:#0E1116;--blue:#2F6BEA;--blue2:#5B8DF5;--muted:#667085;--line:#E6E8EE;--soft:#F3F5F9;--bg:#FAFAFB;font-family:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}.x-dpp,.x-dpp *{box-sizing:border-box}.x-dpp a{color:inherit;text-decoration:none}.x-dpp button{font:inherit;cursor:pointer}.x-dpp{width:100%;max-width:840px;margin:0 auto;text-align:left}.x-dpp .dpp-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.x-dpp .dpp-p{background:#fff;border:1px solid var(--line);border-radius:22px;padding:22px 22px 18px;box-shadow:0 1px 3px rgba(16,24,40,.05);transition:transform .3s,box-shadow .3s}.x-dpp .dpp-p:hover{transform:translateY(-3px);box-shadow:0 16px 40px -20px rgba(16,24,40,.25)}.x-dpp .dpp-p.hot{background:linear-gradient(180deg,#EEF4FF,#fff 40%);border:2px solid #BFD2FB;box-shadow:0 20px 50px -24px rgba(47,107,234,.45)}.x-dpp .dpp-n{display:flex;justify-content:space-between;align-items:center}.x-dpp .dpp-n b{font-size:16px;font-weight:600}.x-dpp .dpp-badge{font-size:11px;color:var(--blue);background:#E0EAFF;padding:3px 10px;border-radius:999px}.x-dpp .dpp-sub{margin:8px 0 22px;font-size:12px;color:#667085}.x-dpp .dpp-pr{display:flex;align-items:baseline;gap:10px}.x-dpp .dpp-pr strong{font-size:38px;font-weight:500;letter-spacing:-.02em}.x-dpp .dpp-pr s{font-size:14px;color:#98A2B3}.x-dpp .dpp-u{margin:2px 0 16px;font-size:11px;color:#98A2B3}.x-dpp .dpp-btn{display:flex;justify-content:center;align-items:center;gap:8px;height:44px;border-radius:999px;border:1px solid var(--line);font-size:14px;font-weight:500;transition:all .2s}.x-dpp .dpp-btn:hover{border-color:var(--ink)}.x-dpp .hot .dpp-btn{background:var(--blue);border-color:var(--blue);color:#fff}.x-dpp .hot .dpp-btn:hover{background:#2459CF}.x-dpp h6{margin:20px 0 8px;font-size:11px;font-weight:500;color:#98A2B3}.x-dpp ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}.x-dpp li{display:flex;align-items:center;gap:10px;font-size:13px}.x-dpp li svg{width:15px;height:15px;color:#667085;flex:none}.x-dpp li i,.x-dpp dd i{margin-left:auto;width:18px;height:18px;border-radius:5px;background:#EEF4FF;color:var(--blue);display:grid;place-items:center}.x-dpp dl{margin:0;display:grid;gap:9px}.x-dpp dl div{display:flex;justify-content:space-between;align-items:center;font-size:13px}.x-dpp dt{font-weight:500}.x-dpp dd{margin:0;color:#667085;display:flex}@media (max-width:640px){.x-dpp .dpp-grid{grid-template-columns:1fr}}@media (prefers-reduced-motion:reduce){.x-dpp *{transition:none!important}}.x-dpp{max-width:none;padding:48px 6%;background-image:radial-gradient(rgba(16,24,40,.14) 1.1px,transparent 1.4px);background-size:18px 18px;background-position:center}.x-dpp .dpp-grid{max-width:840px;margin:0 auto}Subscribe to Builder to see the full source.See pricing