Segmented Pricing Tiers
Overview
A pill segmented control switches between three product pricing groups. Each opens with a description and a flow illustration on the right (visitor traffic passing through capability chips, or a wait-versus-compute bar), followed by hairline tier columns with title, audience, sample price, capability tags and an outline button.
Taken from the page template Suiyun Global Network Platform 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 Segmented Pricing Tiers 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 suiyun-tab-pricing
mcp › Use 8pt MCP to call get_component("suiyun-tab-pricing")
Code
Source for Segmented Pricing Tiers. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-tpt"><h2>只为代码运行的时间付费</h2><p class="x-tpt__sub">（不为空转的服务器买单。）</p><div class="x-tpt__seg" role="tablist"><span class="x-tpt__thumb" aria-hidden="true"></span><button type="button" class="is-on"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.3 3.6 5.1 3.6 8.5s-1.2 6.2-3.6 8.5c-2.4-2.3-3.6-5.1-3.6-8.5S9.6 5.8 12 3.5z"/></svg>网络与加速</button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg>零信任</button><button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13.2 3 5.5 13.4h5.6L10.4 21l7.9-10.6h-5.6z"/></svg>计算与存储</button></div><div class="x-tpt__box"><div class="x-tpt__pane is-on"><div class="x-tpt__intro"><div><h4>为干净的流量付费</h4><p>每个站点都用同一套安全与性能：同样的防护、同样的全球加速、同样的网络。你只为站点需要的深度付费。</p></div><div class="x-tpt__flow"><p><span>访客流量</span><span class="x-tpt__or">你的站点</span></p><div class="x-tpt__chips"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13.2 3 5.5 13.4h5.6L10.4 21l7.9-10.6h-5.6z"/></svg>加速</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.2 5 6v5.4c0 4.3 2.9 7.9 7 9.4 4.1-1.5 7-5.1 7-9.4V6z"/><path d="M12 8.5v4"/><path d="M12 15.6v.1"/></svg>防护</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg>证书</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.5 8-4 4 4 4"/><path d="m15.5 8 4 4-4 4"/><path d="m13.2 5.5-2.4 13"/></svg>防火墙</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="5.5" r="2"/><circle cx="7" cy="18.5" r="2"/><circle cx="17" cy="8.5" r="2"/><path d="M7 7.5v9"/><path d="M17 10.5c0 3.5-4 3.5-8.6 6.5"/></svg>机器人</span></div><p class="x-tpt__cap">每一档防护都相同——付费档位只是加深度</p></div></div><div class="x-tpt__plans" style="grid-template-columns:repeat(4,1fr)"><div class="x-tpt__plan"><h4>入门</h4><p class="x-tpt__for">个人项目</p><p class="x-tpt__price">¥ —<small>/月</small></p><ul><li>不限量防护</li><li>通用证书</li><li>全球加速</li></ul><a href="#">查看入门方案</a></div><div class="x-tpt__plan"><h4>专业</h4><p class="x-tpt__for">专业网站</p><p class="x-tpt__price">¥ —<small>/月</small></p><ul><li>图片优化</li><li>机器人防护</li><li>工单支持</li></ul><a href="#">查看专业方案</a></div><div class="x-tpt__plan"><h4>商业</h4><p class="x-tpt__for">小型企业</p><p class="x-tpt__price">¥ —<small>/月</small></p><ul><li>合规支持</li><li>可用性承诺</li><li>在线客服</li></ul><a href="#">查看商业方案</a></div><div class="x-tpt__plan"><h4>合约</h4><p class="x-tpt__for">关键业务</p><p class="x-tpt__price">定制<small></small></p><ul><li>网络优先级</li><li>全天候支持</li><li>定制合同</li></ul><a href="#">查看合约方案</a></div></div></div><div class="x-tpt__pane"><div class="x-tpt__intro"><div><h4>为活跃成员付费</h4><p>在一个零信任平台上连接并保护成员、设备与数据。小团队起步无负担，扩展到上千人也按统一单价计费。</p></div><div class="x-tpt__flow"><p><span>成员与设备</span><span class="x-tpt__or">内部应用</span></p><div class="x-tpt__chips"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg>身份</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.2 5 6v5.4c0 4.3 2.9 7.9 7 9.4 4.1-1.5 7-5.1 7-9.4V6z"/><path d="M12 8.5v4"/><path d="M12 15.6v.1"/></svg>网关</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.3 3.6 5.1 3.6 8.5s-1.2 6.2-3.6 8.5c-2.4-2.3-3.6-5.1-3.6-8.5S9.6 5.8 12 3.5z"/></svg>浏览</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.5 8-4 4 4 4"/><path d="m15.5 8 4 4-4 4"/><path d="m13.2 5.5-2.4 13"/></svg>数据</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20.5s-6-5.2-6-10.2a6 6 0 0 1 12 0c0 5-6 10.2-6 10.2z"/><circle cx="12" cy="10.2" r="2.2"/><path d="M8 20.5h8"/></svg>设备</span></div><p class="x-tpt__cap">按活跃成员计费，闲置账号不收钱</p></div></div><div class="x-tpt__plans" style="grid-template-columns:repeat(3,1fr)"><div class="x-tpt__plan"><h4>起步</h4><p class="x-tpt__for">小团队</p><p class="x-tpt__price">¥ —<small>/月</small></p><ul><li>访问控制</li><li>安全网关</li><li>社区支持</li></ul><a href="#">查看起步方案</a></div><div class="x-tpt__plan"><h4>按量</h4><p class="x-tpt__for">随人数增长</p><p class="x-tpt__price">¥ —<small>/人/月</small></p><ul><li>可用性承诺</li><li>日志留存</li><li>在线与工单</li></ul><a href="#">查看按量方案</a></div><div class="x-tpt__plan"><h4>合约</h4><p class="x-tpt__for">完整零信任</p><p class="x-tpt__price">定制<small></small></p><ul><li>数据防泄漏</li><li>日志推送</li><li>电话支持</li></ul><a href="#">查看合约方案</a></div></div></div><div class="x-tpt__pane"><div class="x-tpt__intro"><div><h4>墙钟时间与 CPU 时间</h4><p>等待慢接口、大模型或人工回复的空档不计费。只为真正的计算付费，长时间运行的智能体流程也一样。</p></div><div class="x-tpt__flow x-tpt__flow--bars"><div class="x-tpt__row"><span>模型调用</span><div class="x-tpt__track"><i style="width:78%"></i><b style="left:78%;width:3%"></b></div></div><div class="x-tpt__row"><span>接口调用</span><div class="x-tpt__track"><i style="width:46%"></i><b style="left:46%;width:4%"></b></div></div><div class="x-tpt__row"><span>页面渲染</span><div class="x-tpt__track"><i style="width:20%"></i><b style="left:20%;width:6%"></b></div></div><p class="x-tpt__cap"><i class="x-tpt__k1"></i>等待（不计费） <i class="x-tpt__k2"></i>CPU 计算</p></div></div><div class="x-tpt__plans" style="grid-template-columns:repeat(2,1fr)"><div class="x-tpt__plan"><h4>入门</h4><p class="x-tpt__for">试水与原型</p><p class="x-tpt__price">¥ 0<small>/月</small></p><ul><li>每日请求额度</li><li>键值存储</li><li>对象存储</li></ul><a href="#">查看入门方案</a></div><div class="x-tpt__plan"><h4>付费</h4><p class="x-tpt__for">生产环境</p><p class="x-tpt__price">¥ —<small>/月起</small></p><ul><li>按请求计费</li><li>按 CPU 毫秒计费</li><li>按存储计费</li></ul><a href="#">查看付费方案</a></div></div></div></div><p class="x-tpt__note">价格均为示意</p></div>
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap");.x-tpt{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-tpt h2{margin:0;font-size:clamp(30px,3.2vw,46px);font-weight:400;letter-spacing:-.015em}.x-tpt__sub{margin:12px 0 28px;font-size:16px;color:#666}.x-tpt__seg{position:relative;display:inline-flex;gap:2px;padding:4px;border:1px solid #EBEBEB;border-radius:999px;background:#fff}.x-tpt__thumb{position:absolute;top:4px;bottom:4px;left:4px;width:0;border-radius:999px;background:#FF5D1D;box-shadow:0 6px 16px -8px rgba(255,93,29,.8);transition:left .35s cubic-bezier(.3,.8,.3,1),width .35s cubic-bezier(.3,.8,.3,1)}.x-tpt__seg button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:0;border-radius:999px;background:none;font:inherit;font-size:14px;color:#333;cursor:pointer;transition:color .3s}.x-tpt__seg button svg{width:15px;height:15px}.x-tpt__seg button.is-on{color:#fff}.x-tpt__box{position:relative;width:82%;margin:22px auto 0;border:1px solid #EBEBEB;background:#fff;text-align:left}.x-tpt__pane{display:none;animation:x-tpt-in .45s ease}.x-tpt__pane.is-on{display:block}.x-tpt__intro{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:30px 36px;border-bottom:1px solid #EBEBEB}.x-tpt__intro h4{margin:0 0 8px;font-size:16px;font-weight:500}.x-tpt__intro p{margin:0;font-size:14px;line-height:1.55;color:#666}.x-tpt__flow{padding:16px 18px;border:1px dashed #E3E3E3;border-radius:6px}.x-tpt__flow>p:first-child{display:flex;justify-content:space-between;margin:0 0 12px;font-size:12.5px;color:#888}.x-tpt__or{color:#FF5D1D}.x-tpt__chips{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.x-tpt__chips span{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;border:1px dashed #E0E0E0;border-radius:6px;font-size:12.5px;color:#333;animation:x-tpt-pulse 3s ease-in-out infinite}.x-tpt__chips span:nth-child(2){animation-delay:.3s}.x-tpt__chips span:nth-child(3){animation-delay:.6s}.x-tpt__chips span:nth-child(4){animation-delay:.9s}.x-tpt__chips span:nth-child(5){animation-delay:1.2s}.x-tpt__chips svg{width:15px;height:15px}.x-tpt__cap{margin:12px 0 0!important;font-size:12.5px!important;color:#777!important;text-align:center}.x-tpt__plans{display:grid}.x-tpt__plan{padding:26px 26px 28px;border-left:1px solid #EBEBEB}.x-tpt__plan:first-child{border-left:0}.x-tpt__plan h4{margin:0;font-size:14.5px;font-weight:500}.x-tpt__for{margin:2px 0 0;font-size:13.5px;color:#777}.x-tpt__price{margin:16px 0 14px;font-size:30px;letter-spacing:-.01em}.x-tpt__price small{margin-left:4px;font-size:12.5px;color:#777}.x-tpt__plan ul{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 26px;padding:0;list-style:none}.x-tpt__plan li{padding:3px 8px;border:1px solid #EDEDED;border-radius:4px;font-size:12px;color:#555}.x-tpt__plan a{display:inline-flex;align-items:center;height:32px;padding:0 12px;border:1px solid #E5E5E5;border-radius:999px;font-size:13.5px;color:#262626;text-decoration:none;transition:border-color .2s,color .2s}.x-tpt__plan a:hover{border-color:#FF5D1D;color:#FF5D1D}.x-tpt__row{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:10px;margin:8px 0;font-size:12.5px;color:#555}.x-tpt__track{position:relative;height:14px;border-radius:3px;background:#F4F4F2}.x-tpt__track i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:repeating-linear-gradient(90deg,#E6E6E2 0 6px,#F4F4F2 6px 9px)}.x-tpt__track b{position:absolute;top:0;bottom:0;border-radius:3px;background:#FF5D1D}.x-tpt__k1,.x-tpt__k2{display:inline-block;width:10px;height:10px;margin:0 4px 0 10px;border-radius:2px;background:#E6E6E2;vertical-align:-1px}.x-tpt__k2{background:#FF5D1D}.x-tpt__note{margin:14px 0 0;font-size:12.5px;color:#999}@keyframes x-tpt-in{from{opacity:0;transform:translateY(8px)}}@keyframes x-tpt-pulse{0%,100%{border-color:#E0E0E0}50%{border-color:rgba(255,93,29,.55);color:#FF5D1D}}@media (max-width:900px){.x-tpt__box{width:100%}.x-tpt__intro{grid-template-columns:1fr;gap:18px;padding:24px 20px}.x-tpt__plans{grid-template-columns:1fr 1fr!important}.x-tpt__plan:nth-child(odd){border-left:0}.x-tpt__plan{border-top:1px solid #EBEBEB}}@media (max-width:640px){.x-tpt__plans{grid-template-columns:1fr!important}.x-tpt__plan{border-left:0}.x-tpt__seg button{padding:0 9px;font-size:12.5px;gap:4px}.x-tpt__seg button svg{display:none}.x-tpt__chips span{font-size:11px}}@media (prefers-reduced-motion:reduce){.x-tpt__pane,.x-tpt__chips span{animation:none}.x-tpt__thumb{transition:none}}(root) => {
const box = root.classList && root.classList.contains("x-tpt") ? root : root.querySelector(".x-tpt");
if (!box) return;
const btns = [...box.querySelectorAll(".x-tpt__seg button")];
const panes = [...box.querySelectorAll(".x-tpt__pane")];
const thumb = box.querySelector(".x-tpt__thumb");
const place = () => { const b = btns.find((x) => x.classList.contains("is-on")) || btns[0]; thumb.style.left = b.offsetLeft + "px"; thumb.style.width = b.offsetWidth + "px"; };
const offs = btns.map((b, i) => { const h = () => { btns.forEach((x, k) => { x.classList.toggle("is-on", k === i); x.setAttribute("aria-selected", k === i ? "true" : "false"); }); panes.forEach((p, k) => p.classList.toggle("is-on", k === i)); place(); }; b.addEventListener("click", h); return () => b.removeEventListener("click", h); });
place();
const ro = new ResizeObserver(place); ro.observe(box);
return () => { offs.forEach((f) => f()); ro.disconnect(); };
}Subscribe to Builder to see the full source.See pricing