# Tabs tests

```mdx-code-block
import BrowserWindow from '@site/src/components/BrowserWindow';
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
```

## Tabs sync with different heights

```mdx-code-block
<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    Use Ctrl + C to copy.
  </TabItem>
  <TabItem value="mac" label="macOS">
    very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text
  </TabItem>
</Tabs>
```

```mdx-code-block
<Tabs groupId="operating-systems">
  <TabItem value="win" label="Windows">
    Use Ctrl + V to paste.
  </TabItem>
  <TabItem value="mac" label="macOS">
    Use Command + V to paste.
  </TabItem>
</Tabs>
```

When clicking tabs above, they should stay under cursor and we should adjust the scroll position.

## Tabs with className and lazy loading

<Tabs lazy>
  <TabItem value="apple" label="Apple" className="alert alert--primary" default>
    This is an apple 🍎
  </TabItem>
  <TabItem value="orange" label="Orange" className="alert alert--secondary">
    This is an orange 🍊
  </TabItem>
  <TabItem value="banana" label="Banana" className="alert alert--success">
    This is a banana 🍌
  </TabItem>
</Tabs>
