carbon-components/html/tabs/tabs.html

Carbon Components is a component library for IBM Cloud

<nav data-tabs class="bx--tabs" role="navigation">
  <div class="bx--tabs-trigger" tabindex="0">
    <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"></a>
    <svg width="10" height="5" viewBox="0 0 10 5">
      <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
    </svg>
  </div>
  <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
      <li class="bx--tabs__nav-item bx--tabs__nav-item--selected" data-target=".tab-1" role="presentation">
        <a id="tab-link-1" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-1" aria-selected="true">Tab label 1</a>
      </li>
      <li class="bx--tabs__nav-item" data-target=".tab-2" role="presentation">
        <a id="tab-link-2" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-2">Tab label 2</a>
      </li>
      <li class="bx--tabs__nav-item" data-target=".tab-3" role="presentation">
        <a id="tab-link-3" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-3">Tab label 3</a>
      </li>
      <li class="bx--tabs__nav-item" data-target=".tab-4" role="presentation">
        <a id="tab-link-4" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-4">Tab label 4</a>
      </li>
      <li class="bx--tabs__nav-item" data-target=".tab-5" role="presentation">
        <a id="tab-link-5" class="bx--tabs__nav-link" href="javascript:void(0)" role="tab" aria-controls="tab-panel-5">Tab label 5</a>
      </li>
  </ul>
</nav>
<!-- The markup below is for demonstration purposes only -->
<div style="padding: 1rem;">
    <div id="tab-panel-1" class="tab-1" role="tabpanel" aria-labelledby="tab-link-1" aria-hidden="false">
      <p>Content for first tab goes here.</p>
    </div>
    <div id="tab-panel-2" class="tab-2" role="tabpanel" aria-labelledby="tab-link-2" aria-hidden="true" hidden>
      <p>Content for second tab goes here.</p>
    </div>
    <div id="tab-panel-3" class="tab-3" role="tabpanel" aria-labelledby="tab-link-3" aria-hidden="true" hidden>
      <p>Content for third tab goes here.</p>
    </div>
    <div id="tab-panel-4" class="tab-4" role="tabpanel" aria-labelledby="tab-link-4" aria-hidden="true" hidden>
      <p>Content for fourth tab goes here.</p>
    </div>
    <div id="tab-panel-5" class="tab-5" role="tabpanel" aria-labelledby="tab-link-5" aria-hidden="true" hidden>
      <p>Content for fifth tab goes here.</p>
    </div>
</div>