```jsx
import Stack from '../stack';
import { Tabs, TabList, Tab, TabPanels, TabPanel } from '.';

<Stack spacing="4">
  <section>
    <h2>Vertical</h2>
    <div style={{ height: "10px" }} />
    <Tabs>
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
        <Tab>Three</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>one!</p>
        </TabPanel>
        <TabPanel>
          <p>two!</p>
        </TabPanel>
        <TabPanel>
          <p>three!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  </section>
  <section>
    <h2>Horizontal</h2>
    <div style={{ height: "10px" }} />
    <Tabs orientation="horizontal">
      <TabList>
        <Tab>One</Tab>
        <Tab>Two</Tab>
        <Tab>Three</Tab>
      </TabList>
      <TabPanels>
        <TabPanel>
          <p>one!</p>
        </TabPanel>
        <TabPanel>
          <p>two!</p>
        </TabPanel>
        <TabPanel>
          <p>three!</p>
        </TabPanel>
      </TabPanels>
    </Tabs>
  </section>
</Stack>
```