{% filter markdown %}{% raw %}
```html+jinja
<TabGroup>
  <TabSelect>
    <TabOption target="select-recent">Recent</TabOption>
    <TabOption target="select-popular">Popular</TabOption>
    <TabOption target="select-disabled" disabled>Disabled</TabOption>
    <TabOption target="select-trending">Trending</TabOption>
  </TabSelect>

  <TabList>
    <Tab target="select-recent">Recent</Tab>
    <Tab target="select-popular" selected>Popular</Tab>
    <Tab target="select-disabled" disabled>Disabled</Tab>
    <Tab target="select-trending">Trending</Tab>
  </TabList>

  <TabPanel id="select-recent">
    <p>This is the tab panel for <b>"Recent"</b>.</p>
  </TabPanel>

  <TabPanel id="select-popular" hidden>
    <p>This is the tab panel for <b>"Popular"</b>.</p>
  </TabPanel>

  <TabPanel id="select-disabled" hidden>
    <p>This is the tab panel for "Disabled".</p>
  </TabPanel>

  <TabPanel id="select-trending" hidden>
    <p>This is the tab panel for <b>"Trending"</b>.</p>
  </TabPanel>
</TabGroup>
```
{% endraw %}{% endfilter %}