1 files changed, 40 insertions, 0 deletions
diff --git a/docs/components/ui/Tabs/SelectResult.jinja b/docs/components/ui/Tabs/SelectResult.jinja
new file mode 100644
index 0000000..ffdf0ea
--- /dev/null
+++ b/docs/components/ui/Tabs/SelectResult.jinja
@@ -0,0 +1,40 @@
+{#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>