Tabbed Logo Testimonial
Overview
A testimonial card under a centered headline: a row of fictional brand tabs on top, and when the orange progress bar under the active tab fills it moves to the next company. The large quote ends in an orange highlight, with attribution and a small 3D illustration; gray wordmarks drift sideways below and pause on hover.
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 Tabbed Logo Testimonial to your project in your colors.
Where to use it
Animated headlines, testimonials, emphasis copy and large-type layouts.
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-quote
mcp › Use 8pt MCP to call get_component("suiyun-tab-quote")
Code
Source for Tabbed Logo Testimonial. Motion uses only transform and opacity and respects the Reduce motion setting.
<div class="x-ltq"><h2>被认真做事的团队信赖</h2><p class="x-ltq__sub">他们把基础设施交给了我们。</p><div class="x-ltq__card"><div class="x-ltq__tabs" role="tablist"><button type="button" class="x-ltq__tab is-on" data-i="0"><i style="background:#4C9A54"></i>栗市<span class="x-ltq__bar"></span></button><button type="button" class="x-ltq__tab" data-i="1"><i style="background:#8E62E0"></i>回声<span class="x-ltq__bar"></span></button><button type="button" class="x-ltq__tab" data-i="2"><i style="background:#3B8DE6"></i>匣递<span class="x-ltq__bar"></span></button><span class="x-ltq__tab x-ltq__tab--mute"><i></i>青苔</span><span class="x-ltq__tab x-ltq__tab--mute"><i></i>云笺</span><span class="x-ltq__tab x-ltq__tab--mute"><i></i>拾贝</span></div><div class="x-ltq__slides"><figure class="x-ltq__slide is-on"><blockquote>“对我们来说，难点从来不是能用多少种复杂技术，<em>而是反过来——燧云帮我们用最简单的办法，做成非常复杂的事。</em>”</blockquote><figcaption><b>林一舟</b>开发效率负责人 · 栗市</figcaption><img src="https://8pt.dev/api/media/23d8db7580fa6e89b75aa9e0.webp" alt=""></figure><figure class="x-ltq__slide"><blockquote>“客服对话一旦卡顿，用户就走了。<em>切到燧云之后，我们终于不用半夜盯着流量曲线了。</em>”</blockquote><figcaption><b>周可</b>平台工程主管 · 回声</figcaption><img src="https://8pt.dev/api/media/a259b87b56ff1c362ac60aa2.webp" alt=""></figure><figure class="x-ltq__slide"><blockquote>“我们的仓配系统要在每个城市都跑得一样快，<em>燧云让这件事从工程难题变成了一行配置。</em>”</blockquote><figcaption><b>许南</b>技术合伙人 · 匣递</figcaption><img src="https://8pt.dev/api/media/6ef20516418938f0f575a948.webp" alt=""></figure></div></div><p class="x-ltq__more">还有更多团队……</p><div class="x-ltq__marq" aria-hidden="true"><div class="x-ltq__track"><span>青苔</span><span>云笺</span><span>拾贝</span><span>山屿</span><span>白鹭</span><span>半岛</span><span>木纹</span><span>潮汐</span><span>北窗</span><span>雾灯</span><span>青苔</span><span>云笺</span><span>拾贝</span><span>山屿</span><span>白鹭</span><span>半岛</span><span>木纹</span><span>潮汐</span><span>北窗</span><span>雾灯</span></div></div></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-ltq{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-ltq h2{margin:0;font-size:clamp(30px,3.1vw,44px);font-weight:400;letter-spacing:-.015em}.x-ltq__sub{margin:14px 0 30px;font-size:16px;color:#666}.x-ltq__card{width:82%;margin:0 auto;border:1px solid #EBEBEB;background:#fff;text-align:left}.x-ltq__tabs{display:flex;border-bottom:1px solid #EBEBEB;overflow:hidden}.x-ltq__tab{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;flex:1;height:52px;border:0;border-right:1px solid #F2F2F2;background:none;font:inherit;font-size:14px;color:#777;cursor:pointer;transition:color .25s,background .25s}.x-ltq__tab i{width:12px;height:12px;border-radius:4px;background:#cfcfcf}.x-ltq__tab.is-on{color:#1d1d1d;background:#FFFBF6}.x-ltq__tab--mute{cursor:default;opacity:.55}.x-ltq__bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#FF5D1D}.x-ltq__tab.is-on .x-ltq__bar{animation:x-ltq-prog 6s linear forwards}.x-ltq__card:hover .x-ltq__tab.is-on .x-ltq__bar{animation-play-state:paused}.x-ltq__slides{position:relative;height:300px}.x-ltq__slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 190px;grid-template-rows:1fr auto;gap:10px 40px;margin:0;padding:40px 56px;box-sizing:border-box;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;pointer-events:none}.x-ltq__slide.is-on{opacity:1;transform:none;pointer-events:auto}.x-ltq__slide blockquote{margin:0;align-self:center;font-size:clamp(20px,2vw,27px);line-height:1.38;letter-spacing:-.01em}.x-ltq__slide em{font-style:normal;color:#FF5D1D}.x-ltq__slide figcaption{grid-column:1;font-size:13.5px;color:#666}.x-ltq__slide figcaption b{margin-right:8px;color:#262626;font-weight:500}.x-ltq__slide img{grid-column:2;grid-row:1/3;align-self:center;width:190px;height:190px;border-radius:16px;object-fit:cover;animation:x-ltq-float 6s ease-in-out infinite}.x-ltq__more{margin:34px 0 18px;font-size:14.5px;color:#666}.x-ltq__marq{width:82%;margin:0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.x-ltq__track{display:flex;width:max-content;animation:x-ltq-marq 30s linear infinite}.x-ltq__marq:hover .x-ltq__track{animation-play-state:paused}.x-ltq__track span{padding:0 34px;font-size:24px;font-weight:700;letter-spacing:.12em;color:#3a3a3a;white-space:nowrap}.x-ltq__track span:nth-child(3n){font-weight:400;letter-spacing:.3em}.x-ltq__track span:nth-child(4n){color:#777}@keyframes x-ltq-prog{to{width:100%}}@keyframes x-ltq-marq{to{transform:translateX(-50%)}}@keyframes x-ltq-float{50%{transform:translateY(-8px)}}@media (max-width:640px){.x-ltq__card,.x-ltq__marq{width:100%}.x-ltq__tab--mute{display:none}.x-ltq__slides{height:430px}.x-ltq__slide{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:26px 22px}.x-ltq__slide img{grid-column:1;grid-row:1;width:110px;height:110px}.x-ltq__slide blockquote{font-size:20px}}@media (prefers-reduced-motion:reduce){.x-ltq__track,.x-ltq__slide img,.x-ltq__tab.is-on .x-ltq__bar{animation:none}.x-ltq__tab.is-on .x-ltq__bar{width:100%}.x-ltq__slide{transition:none}}(root) => {
const box = root.classList && root.classList.contains("x-ltq") ? root : root.querySelector(".x-ltq");
if (!box) return;
const tabs = [...box.querySelectorAll("button.x-ltq__tab")];
const slides = [...box.querySelectorAll(".x-ltq__slide")];
const pick = (i) => { tabs.forEach((t, k) => { t.classList.toggle("is-on", k === i); t.setAttribute("aria-selected", k === i ? "true" : "false"); }); slides.forEach((s, k) => s.classList.toggle("is-on", k === i)); };
const offs = tabs.map((t, i) => { const h = () => pick(i); t.addEventListener("click", h); return () => t.removeEventListener("click", h); });
const next = (e) => { if (e.animationName && e.animationName.indexOf("x-ltq-prog") > -1) { const i = tabs.findIndex((t) => t.classList.contains("is-on")); pick((i + 1) % tabs.length); } };
box.addEventListener("animationend", next);
return () => { offs.forEach((f) => f()); box.removeEventListener("animationend", next); };
}Subscribe to Builder to see the full source.See pricing