<Tabs className="tabs">
  <TabList>
    <Tab>Tab 1</Tab>
    <Tab>Tab 2</Tab>
  </TabList>
  <TabPanel>Content 1</TabPanel>
  <TabPanel>Content 2</TabPanel>
</Tabs>

.tabs {
  display: flex;
  flex-direction: column;

  .tablist {
    display: flex;
    gap: 2px;
    border-bottom: 2px $border2-color solid;
  }

  .tab {
    padding: 0.5rem 1rem;
    border: 2px transparent solid;
    background-color: $background3-color;
    text-align: center;
    border-top-left-radius: $radius-normal;
    border-top-right-radius: $radius-normal;
    cursor: pointer;

    &--active {
      background-color: $background4-color;
    }

    &:hover {
      border: 2px $border2-color solid;
    }
  }

  .tabpanel {
    padding: 1rem;
  }
}