BoxedTabs

Default

<div class="jumpu-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>

Anchor

ホームタスク実績会話

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

Small

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