<section class="section section-tokens" aria-labelledby="tabs-heading">
  <h2 id="tabs-heading">Tabs</h2>

  <h3>Pill tabs</h3>
  <div class="tabs" data-tabs>
    <div class="tabs-list">
      <button class="tab tab-active" aria-controls="tab-panel-overview" type="button">Overview</button>
      <button class="tab" aria-controls="tab-panel-details" type="button">Details</button>
      <button class="tab" aria-controls="tab-panel-settings" type="button">Settings</button>
    </div>
    <div class="tab-panels">
      <div class="tab-panel tab-panel-active" id="tab-panel-overview">
        <p>Overview content for pill tabs.</p>
      </div>
      <div class="tab-panel" id="tab-panel-details" hidden>
        <p>Details content for pill tabs.</p>
      </div>
      <div class="tab-panel" id="tab-panel-settings" hidden>
        <p>Settings content for pill tabs.</p>
      </div>
    </div>
  </div>

  <h3>Compact tabs</h3>
  <div class="tabs tabs-compact" data-tabs>
    <div class="tabs-list">
      <button class="tab tab-active" aria-controls="tab-panel-c-one" type="button">One</button>
      <button class="tab" aria-controls="tab-panel-c-two" type="button">Two</button>
      <button class="tab" aria-controls="tab-panel-c-three" type="button">Three</button>
    </div>
    <div class="tab-panels">
      <div class="tab-panel tab-panel-active" id="tab-panel-c-one">
        <p>First compact panel.</p>
      </div>
      <div class="tab-panel" id="tab-panel-c-two" hidden>
        <p>Second compact panel.</p>
      </div>
      <div class="tab-panel" id="tab-panel-c-three" hidden>
        <p>Third compact panel.</p>
      </div>
    </div>
  </div>

  <h3>Vertical tabs</h3>
  <div class="tabs tabs-vertical" data-tabs>
    <div class="tabs-list">
      <button class="tab tab-active" aria-controls="tab-panel-v-a" type="button">Account</button>
      <button class="tab" aria-controls="tab-panel-v-b" type="button">Security</button>
      <button class="tab" aria-controls="tab-panel-v-c" type="button">Billing</button>
    </div>
    <div class="tab-panels">
      <div class="tab-panel tab-panel-active" id="tab-panel-v-a">
        <p>Account settings.</p>
      </div>
      <div class="tab-panel" id="tab-panel-v-b" hidden>
        <p>Security settings.</p>
      </div>
      <div class="tab-panel" id="tab-panel-v-c" hidden>
        <p>Billing settings.</p>
      </div>
    </div>
  </div>
</section>