Tabs

<style>
 .cs-tab-a {
  border: 1px groove var(--cs-color-yellow);
  border-radius: 5px;
  background: var(--cs-color);
}

.cs-content-a {
  border: 1px groove var(--cs-color-yellow);
  border-radius: 5px;
  background: var(--cs-color-black);
}

 .cs-tab-b {
  border: 1px groove var(--cs-color-blue);
  border-radius: 5px;
  background: var(--cs-color);
}

.cs-content-b {
  border: 1px groove var(--cs-color-blue);
  border-radius: 5px;
  background: var(--cs-color-black);
}

 .cs-tab-c {
  border: 1px groove var(--cs-color-yellow);
  border-radius: 5px;
  background: var(--cs-color);
}

.cs-content-c {
  border: 1px groove var(--cs-color-yellow);
  border-radius: 5px;
  background: var(--cs-color-black);
}
</style>

<div class="cs-tabs">
    <div class="cs-tab-row cs-no-marker cs-flex-align-center cs-flex-justify-center">
      <details class="cs-tab cs-tab-a" name="profiles" ><summary>TAB NAME</summary></details>
      <details class="cs-tab cs-tab-b" name="profiles"><summary>TAB NAME</summary></details>
      <details class="cs-tab cs-tab-c" name="profiles"><summary>TAB NAME</summary></details>
     </div>

    <div class="cs-content-a cs-text-align-center">CONTENT GOES HERE</div>
    <div class="cs-content-b cs-text-align-center">CONTENT GOES HERE</div>
    <div class="cs-content-c cs-text-align-center"> CONTENT GOES HERE</div>
    </div>
</div>