chromium/chrome/browser/resources/webui_gallery/demos/cr_tab_box/cr_tab_box_demo.html

<style>
  div[slot='panel'] {
    padding: 90px 0;
    width: 100%;
  }

  button {
    background: white;
    border: 1px solid #c8c8c8;
    color: #646464;
    line-height: 24px;
    margin-inline-end: 10px;
  }

  button:hover {
    color: black;
  }

  button:active {
    box-shadow: 0 1px 2px 0 rgba(200, 200, 200, .3),
        0 3px 6px 2px rgba(200, 200, 200, .15);
    color: black;
  }

  span {
    font-family: sans-serif;
    font-size: 10pt;
  }

  .demos {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
  }
</style>
<h1>cr-tab-box</h1>
<div class="demos">
  <cr-tab-box>
    <div slot="tab">Tab 1</div>
    <div slot="tab">Tab 2</div>
    <div slot="tab">Tab 3</div>
    <div slot="panel">Tab 1</div>
    <div slot="panel">Tab 2</div>
    <div slot="panel">Tab 3</div>
  </cr-tab-box>
  <div class="buttons">
    <button class="add-tab">Add</button>
    <button class="add-tab-one">Add At 1</button>
    <button class="select-tab-one">Select At 1</button>
  </div>
  <div class="info">
    <span>Tab Count: </span>
    <span class="tab-count"></span>
    <span>, Selected Tab: </span>
    <span class="selected-tab">0</span>
  </div>
</div>
<template id="template">
  <div slot="tab"></div>
  <div slot="panel"></div>
</template>