Tabs

boxed-tabs

<div class="boxed-tabs">
  <div role="tablist" aria-label="Sample BoxedTabs">
    <button
      role="tab"
      aria-selected="false"
      aria-controls="default-panel-1"
      id="default-tab-1"
      tabindex="0"
    >
      ホーム
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="default-panel-2"
      id="default-tab-2"
      tabindex="0"
    >
      タスク
    </button>
    <button
      role="tab"
      aria-selected="true"
      aria-controls="default-panel-3"
      id="default-tab-3"
      tabindex="-1"
    >
      実績
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="default-panel-4"
      id="default-tab-4"
      tabindex="0"
    >
      会話
    </button>
  </div>
</div>
<div
  role="tabpanel"
  id="default-panel-1"
  aria-labelledby="default-tab-1"
></div>
<div
  role="tabpanel"
  id="default-panel-2"
  aria-labelledby="default-tab-2"
></div>
<div
  role="tabpanel"
  id="default-panel-3"
  aria-labelledby="default-tab-3"
></div>
<div
  role="tabpanel"
  id="default-panel-4"
  aria-labelledby="default-tab-4"
></div>

tabs

<div class="tabs">
  <div role="tablist" aria-label="Sample BoxedTabs">
    <button
      role="tab"
      aria-selected="false"
      aria-controls="panel-1"
      id="tab-1"
      tabindex="0"
    >
      ホーム
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="panel-2"
      id="tab-2"
      tabindex="-1"
    >
      タスク
    </button>
    <button
      role="tab"
      aria-selected="true"
      aria-controls="panel-3"
      id="tab-3"
      tabindex="-1"
    >
      実績
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="panel-4"
      id="tab-4"
      tabindex="-1"
    >
      会話
    </button>
  </div>
</div>