Tabs

<div class="tabs">
  <div role="tablist" aria-label="Settings sections" class="tablist">
    <button type="button" role="tab" id="tab-a" class="tab" aria-selected="true" aria-controls="panel-a" tabindex="0">Profile</button>
    <button type="button" role="tab" id="tab-b" class="tab" aria-selected="false" aria-controls="panel-b" tabindex="-1">Security</button>
    <button type="button" role="tab" id="tab-c" class="tab" aria-selected="false" aria-controls="panel-c" tabindex="-1">Billing</button>
  </div>
  <div id="panel-a" role="tabpanel" class="tabpanel" aria-labelledby="tab-a">
    <p>Public name, avatar, and email visibility.</p>
  </div>
  <div id="panel-b" role="tabpanel" class="tabpanel" aria-labelledby="tab-b" hidden>
    <p>Password, sessions, and two-factor authentication.</p>
  </div>
  <div id="panel-c" role="tabpanel" class="tabpanel" aria-labelledby="tab-c" hidden>
    <p>Plan, payment method, and invoices.</p>
  </div>
</div>