{#css ui/Tabs/Tabs.css #}

<div class="bg-cover"
  style="background-image:linear-gradient(to right, rgba(56,189,248, 0.3), rgba(37,99,235, 0.3))"
  data-md-skip
></div>

<div class="horizontal-tabs" data-md-skip>
  <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>
</div>
