<a-tab-group>

HTML

<a-tab-group>
  <a-tab role="heading">Tab 1</a-tab>
  <a-tab-panel>This is the tab panel for Tab 1.</a-tab-panel>

  <a-tab role="heading">Tab 2</a-tab>
  <a-tab-panel>This is the tab panel for Tab 2.</a-tab-panel>

  <a-tab role="heading">Tab 3</a-tab>
  <a-tab-panel>This is the tab panel for Tab 3.</a-tab-panel>

  <a-tab role="heading" disabled>Disabled 1</a-tab>
  <a-tab-panel>This is the tab panel for "Disabled 1".</a-tab-panel>

  <a-tab role="heading" closable>Closable 1</a-tab>
  <a-tab-panel>This is the tab panel for Closable 1.</a-tab-panel>

  <a-tab role="heading" disabled>Disabled 2</a-tab>
  <a-tab-panel>This is the tab panel for Disabled 2.</a-tab-panel>

  <a-tab role="heading" closable>Closable 2</a-tab>
  <a-tab-panel>This is the tab panel for Closable 2.</a-tab-panel>

  <a-tab role="heading" disabled closable>Closable & disabled</a-tab>
  <a-tab-panel>This is the tab panel for Closable & disabled.</a-tab-panel>

  <a-tab role="heading">Tab 4</a-tab>
  <a-tab-panel>This is the tab panel for Tab 4.</a-tab-panel>

  <a-tab role="heading">Tab 5</a-tab>
  <a-tab-panel>This is the tab panel for Tab 5.</a-tab-panel>
</a-tab-group>

CSS

This is some custom styling applied to the components when you check the Custom styling checkbox from the form above.

a-tab-group {
  --selected-tab-color: var(--background-body);
  --selected-tab-bg-color: #005fcc;
  --tab-group-border-color: var(--border);
  --tab-group-bg-color: #ffffff;
  --scroll-button-inline-offset: 0.25rem;

  border: 1px solid var(--tab-group-border-color);
  border-radius: 0.25rem;
  background-color: var(--tab-group-bg-color);
  overflow: hidden;
}

a-tab-group::part(scroll-button) {
  border-radius: 0.25rem;
}

a-tab-group::part(tabs) {
  padding: 0.5rem;
}

a-tab-group::part(panels) {
  padding: 1rem;
  border-width: 1px 0 0 0;
  border-style: solid;
  border-color: var(--tab-group-border-color);
}

a-tab-group[placement="bottom"]::part(panels) {
  border-width: 0 0 1px 0;
}

a-tab-group[placement="start"]::part(panels) {
  border-width: 0 0 0 1px;
}

a-tab-group[placement="end"]::part(panels) {
  border-width: 0 1px 0 0;
}

a-tab-group a-tab::part(base) {
  border-radius: 0.25rem;
}

a-tab-group[placement="top"] a-tab,
a-tab-group[placement="bottom"] a-tab {
  margin: 0 0.25rem;
}

a-tab-group[placement="start"] a-tab,
a-tab-group[placement="end"] a-tab {
  margin: 0.25rem 0;
}

a-tab-group a-tab[selected]::part(close-tab) {
  color: var(--selected-tab-color);
}

@media (prefers-color-scheme: dark) {
  a-tab-group {
    --selected-tab-bg-color: #99c8ff;
    --tab-group-bg-color: #202125;
    --tab-group-border-color: #494c50;
  }
}