Webflow tabs component (free, copy and paste)

Q: How do I make tabs in Webflow?

Paste this component, or use Webflow's built-in Tabs element. This one is plain elements and classes, so every part is easy to restyle, and a small script switches the panels on your published site.
Q: Why do I see all three panels in the Designer?

The Designer doesn't run scripts, so it shows every panel stacked, which makes them easy to edit. On your published site the script shows one panel at a time.
Q: Can I add a fourth tab?

Yes. Duplicate a tab button and a panel in the Navigator, keeping the same order. The script pairs the first tab with the first panel, the second with the second, and so on.
Q: Are the tabs accessible?

Yes. The buttons use the tab and tabpanel roles with aria-selected, so screen readers announce which tab is open.
Q: Is this tabs component free?

Yes. Copy it with no account and use it on client sites and your own sites.
Q: Does it work on the free Webflow plan?

Yes. It pastes on every Webflow plan, including Starter. If it includes an Embed element, editing that Embed's code needs a paid site plan.
<section class="tb">
  <div class="tb-inner">
    <p class="tb-eyebrow">Product tour</p>
    <h2 class="tb-title">One workspace for the whole team</h2>
    <div class="tb-tabs" role="tablist" aria-label="Product features">
      <button class="tb-tab" role="tab" aria-selected="true" aria-controls="tb-panel-1" id="tb-tab-1">Plan</button>
      <button class="tb-tab" role="tab" aria-selected="false" aria-controls="tb-panel-2" id="tb-tab-2">Build</button>
      <button class="tb-tab" role="tab" aria-selected="false" aria-controls="tb-panel-3" id="tb-tab-3">Launch</button>
    </div>
    <div class="tb-panels">
      <div class="tb-panel" role="tabpanel" id="tb-panel-1" aria-labelledby="tb-tab-1">
        <div class="tb-copy">
          <h3 class="tb-heading">Plan every project in one place</h3>
          <p class="tb-text">Turn ideas into briefs, set owners and dates, and see what ships this week without a single status meeting.</p>
          <ul class="tb-list"><li class="tb-item">Shared roadmaps</li><li class="tb-item">Briefs with owners and dates</li><li class="tb-item">Weekly summaries by email</li></ul>
        </div>
        <div class="tb-visual tb-visual-plan"><div class="tb-bar tb-bar-1"></div><div class="tb-bar tb-bar-2"></div><div class="tb-bar tb-bar-3"></div></div>
      </div>
      <div class="tb-panel" role="tabpanel" id="tb-panel-2" aria-labelledby="tb-tab-2">
        <div class="tb-copy">
          <h3 class="tb-heading">Build with the tools you already use</h3>
          <p class="tb-text">Connect GitHub, Figma and Slack. Every commit, design and comment lands on the right task automatically.</p>
          <ul class="tb-list"><li class="tb-item">40+ integrations</li><li class="tb-item">Two-way GitHub sync</li><li class="tb-item">Comments in context</li></ul>
        </div>
        <div class="tb-visual tb-visual-build"><div class="tb-card"></div><div class="tb-card"></div><div class="tb-card"></div><div class="tb-card"></div></div>
      </div>
      <div class="tb-panel" role="tabpanel" id="tb-panel-3" aria-labelledby="tb-tab-3">
        <div class="tb-copy">
          <h3 class="tb-heading">Launch and measure what happened</h3>
          <p class="tb-text">Ship with a checklist, then watch adoption, feedback and revenue on one dashboard after release.</p>
          <ul class="tb-list"><li class="tb-item">Launch checklists</li><li class="tb-item">Release notes in one click</li><li class="tb-item">Adoption dashboards</li></ul>
        </div>
        <div class="tb-visual tb-visual-launch"><div class="tb-ring"></div></div>
      </div>
    </div>
  </div>
</section>
<style>
.tb { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background: #fafaf9; color: #0c0a09; padding: 104px 24px; }
.tb-inner { max-width: 1080px; margin: 0 auto; }
.tb-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2563eb; text-align: center; margin: 0 0 12px; }
.tb-title { font-size: 42px; line-height: 1.1; letter-spacing: -0.02em; text-align: center; margin: 0 0 40px; }
.tb-tabs { display: flex; justify-content: center; gap: 8px; margin: 0 0 40px; }
.tb-tab { padding: 12px 24px; border: 1px solid #e7e5e4; border-radius: 999px; background: #ffffff; color: #57534e; font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; font-size: 16px; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.tb-tab:hover { color: #0c0a09; border-color: #a8a29e; }
.tb-tab.is-active { background: #0c0a09; border-color: #0c0a09; color: #ffffff; }
.tb-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; padding: 40px; background: #ffffff; border: 1px solid #e7e5e4; border-radius: 20px; }
.tb-panel.is-hidden { display: none; }
.tb-heading { font-size: 28px; line-height: 1.2; margin: 0 0 16px; }
.tb-text { font-size: 17px; line-height: 1.6; color: #57534e; margin: 0 0 24px; }
.tb-list { list-style: none; padding: 0; margin: 0; }
.tb-item { font-size: 16px; padding: 10px 0; border-top: 1px solid #e7e5e4; color: #292524; }
.tb-visual { height: 280px; border-radius: 14px; background: #eff6ff; display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: 32px; }
.tb-bar { height: 28px; border-radius: 8px; background: #2563eb; }
.tb-bar-1 { width: 80%; } .tb-bar-2 { width: 55%; background: #60a5fa; } .tb-bar-3 { width: 68%; background: #93c5fd; }
.tb-visual-build { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; background: #f0fdf4; }
.tb-card { border-radius: 10px; background: #22c55e; }
.tb-visual-launch { align-items: center; background: #fef3c7; }
.tb-ring { width: 160px; height: 160px; border-radius: 50%; border: 22px solid #f59e0b; border-right-color: #fde68a; }
@media (max-width: 991px) { .tb-panel { grid-template-columns: 1fr; } }
@media (max-width: 767px) { .tb { padding: 72px 20px; } .tb-title { font-size: 32px; } .tb-tab { padding: 10px 16px; font-size: 15px; } .tb-panel { padding: 24px; gap: 28px; } .tb-visual { height: 200px; } }
</style>
<script>
document.querySelectorAll(".tb-tabs").forEach(function (list) {
  var root = list.closest(".tb");
  var tabs = list.querySelectorAll(".tb-tab");
  var panels = root.querySelectorAll(".tb-panel");
  function show(i) {
    tabs.forEach(function (t, j) { t.classList.toggle("is-active", j === i); t.setAttribute("aria-selected", j === i ? "true" : "false"); });
    panels.forEach(function (p, j) { p.classList.toggle("is-hidden", j !== i); });
  }
  tabs.forEach(function (tab, i) { tab.addEventListener("click", function () { show(i); }); });
  show(0);
});
</script>