From 82b161bddf3b0eae6fea5b6c479a3aa326412789 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Tue, 28 Sep 2021 11:37:27 -0500
Subject: [PATCH 1/6] Add tabs feature to markdown

---
 .../pages/Documentation/Markdown/index.tsx    | 52 ++++++++++++++++++-
 .../Documentation/Markdown/styles.module.css  | 50 ++++++++++++++++++
 2 files changed, 101 insertions(+), 1 deletion(-)

diff --git a/src/components/pages/Documentation/Markdown/index.tsx b/src/components/pages/Documentation/Markdown/index.tsx
index 1c30a015..bca66937 100644
--- a/src/components/pages/Documentation/Markdown/index.tsx
+++ b/src/components/pages/Documentation/Markdown/index.tsx
@@ -2,6 +2,7 @@ import React, {
   useCallback,
   useEffect,
   useRef,
+  useState,
   ReactNode,
   ReactElement
 } from 'react'
@@ -17,6 +18,7 @@ import { getPathWithSource } from '../../../../utils/shared/sidebar'
 import sharedStyles from '../styles.module.css'
 import 'github-markdown-css/github-markdown.css'
 import styles from './styles.module.css'
+import { nanoid } from 'nanoid'
 
 const isInsideCodeBlock = (node: Element): boolean => {
   while (node?.parentNode) {
@@ -117,6 +119,52 @@ const Card: React.FC<{
   )
 }
 
+const Toggle: React.FC<{
+  children: Array<{ props: { title: string } } | string>
+}> = ({ children }) => {
+  const [toggleId, setToggleId] = useState('')
+  const [selectedTabInd, setSelectedTabInd] = useState(0)
+  const tabs: Array<{ props: { title: string } } | string> = children.filter(
+    child => child !== '\n'
+  )
+
+  useEffect(() => {
+    if (toggleId === '') {
+      setToggleId(nanoid())
+    }
+  }, [])
+
+  return (
+    <div className={styles.toggle}>
+      {tabs.map((tab, i) => (
+        <>
+          <input
+            id={`tab-${toggleId}-${i}`}
+            type="radio"
+            name={`toggle-${toggleId}`}
+            onChange={(): void => {
+              setSelectedTabInd(i)
+            }}
+            checked={i === selectedTabInd}
+          />
+          <label
+            className={styles.tabHeading}
+            key={i}
+            htmlFor={`tab-${toggleId}-${i}`}
+          >
+            {typeof tab !== 'string' && tab.props.title}
+          </label>
+          {tab}
+        </>
+      ))}
+    </div>
+  )
+}
+
+const Tab: React.FC<{ title: string }> = ({ children }) => {
+  return <div className={styles.tab}>{children}</div>
+}
+
 const renderAst = new rehypeReact({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   createElement: React.createElement as any,
@@ -125,7 +173,9 @@ const renderAst = new rehypeReact({
     details: Details,
     a: Link,
     card: Card,
-    cards: Cards
+    cards: Cards,
+    toggle: Toggle,
+    tab: Tab
   }
 }).Compiler
 
diff --git a/src/components/pages/Documentation/Markdown/styles.module.css b/src/components/pages/Documentation/Markdown/styles.module.css
index a6ed9a12..89dfe236 100644
--- a/src/components/pages/Documentation/Markdown/styles.module.css
+++ b/src/components/pages/Documentation/Markdown/styles.module.css
@@ -430,3 +430,53 @@ a.card {
     background-color: var(--color-light-blue);
   }
 }
+
+.toggle {
+  display: flex;
+  flex-wrap: wrap;
+
+  input {
+    height: 0;
+    opacity: 0;
+    position: absolute;
+    width: 0;
+    overflow: hidden;
+  }
+
+  input:checked + label {
+    color: var(--color-azure);
+    border-color: var(--color-azure);
+  }
+
+  input:checked + label + .tab {
+    height: initial;
+    opacity: initial;
+    position: static;
+    width: initial;
+    overflow: visible;
+  }
+
+  .tabHeading {
+    padding: 12px 16px 10px;
+    background-color: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    font-weight: bold;
+    font-size: 16px;
+    font-family: var(--font-brandon);
+    order: -1;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+
+.tab {
+  margin: 10px 0 0;
+  height: 0;
+  opacity: 0;
+  position: absolute;
+  overflow: hidden;
+  width: 0;
+}

From 09128b8bfeae5ac1928c8db1adfab26ebafa6979 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Wed, 29 Sep 2021 10:11:51 -0500
Subject: [PATCH 2/6] Synchronize same page md toggles

---
 .../Markdown/ToggleProvider/index.tsx         | 48 ++++++++++
 .../pages/Documentation/Markdown/index.tsx    | 88 +++++++++++++------
 2 files changed, 109 insertions(+), 27 deletions(-)
 create mode 100644 src/components/pages/Documentation/Markdown/ToggleProvider/index.tsx

diff --git a/src/components/pages/Documentation/Markdown/ToggleProvider/index.tsx b/src/components/pages/Documentation/Markdown/ToggleProvider/index.tsx
new file mode 100644
index 00000000..7d4df78c
--- /dev/null
+++ b/src/components/pages/Documentation/Markdown/ToggleProvider/index.tsx
@@ -0,0 +1,48 @@
+import React, { createContext, useState } from 'react'
+
+interface ITogglesData {
+  [key: string]: { texts: string[]; checkedInd: number }
+}
+
+interface ITogglesContext {
+  addNewToggle?: (id: string, texts: string[]) => void
+  updateToggleInd?: (id: string, newInd: number) => void
+  togglesData?: ITogglesData
+}
+
+export const TogglesContext = createContext<ITogglesContext>({})
+
+export const TogglesProvider: React.FC = ({ children }) => {
+  const [togglesData, setTogglesData] = useState({})
+
+  const addNewToggle = (id: string, texts: string[]): void => {
+    const togglesDataCopy: ITogglesData = { ...togglesData }
+    togglesDataCopy[id] = { texts, checkedInd: 0 }
+    setTogglesData(togglesDataCopy)
+  }
+
+  const updateToggleInd = (id: string, newInd: number): void => {
+    const togglesDataCopy: ITogglesData = { ...togglesData }
+    const selectedTabText = togglesDataCopy[id].texts[newInd]
+    togglesDataCopy[id] = { ...togglesDataCopy[id], checkedInd: newInd }
+
+    for (const [toggleId, { texts }] of Object.entries(togglesDataCopy)) {
+      if (texts.includes(selectedTabText)) {
+        togglesDataCopy[toggleId] = {
+          ...togglesDataCopy[toggleId],
+          checkedInd: togglesDataCopy[id].texts.indexOf(selectedTabText)
+        }
+      }
+    }
+
+    setTogglesData(togglesDataCopy)
+  }
+
+  return (
+    <TogglesContext.Provider
+      value={{ addNewToggle, updateToggleInd, togglesData }}
+    >
+      {children}
+    </TogglesContext.Provider>
+  )
+}
diff --git a/src/components/pages/Documentation/Markdown/index.tsx b/src/components/pages/Documentation/Markdown/index.tsx
index bca66937..eed7dc6f 100644
--- a/src/components/pages/Documentation/Markdown/index.tsx
+++ b/src/components/pages/Documentation/Markdown/index.tsx
@@ -4,9 +4,11 @@ import React, {
   useRef,
   useState,
   ReactNode,
-  ReactElement
+  ReactElement,
+  useContext
 } from 'react'
 import cn from 'classnames'
+import { nanoid } from 'nanoid'
 import { navigate } from '@reach/router'
 import rehypeReact from 'rehype-react'
 import Collapsible from 'react-collapsible'
@@ -18,7 +20,7 @@ import { getPathWithSource } from '../../../../utils/shared/sidebar'
 import sharedStyles from '../styles.module.css'
 import 'github-markdown-css/github-markdown.css'
 import styles from './styles.module.css'
-import { nanoid } from 'nanoid'
+import { TogglesContext, TogglesProvider } from './ToggleProvider'
 
 const isInsideCodeBlock = (node: Element): boolean => {
   while (node?.parentNode) {
@@ -119,51 +121,81 @@ const Card: React.FC<{
   )
 }
 
+const ToggleTab: React.FC<{
+  id: string
+  title: string
+  ind: number
+  onChange: () => void
+  checked: boolean
+}> = ({ children, id, checked, ind, onChange, title }) => {
+  return (
+    <>
+      <input
+        id={`tab-${id}-${ind}`}
+        type="radio"
+        name={`toggle-${id}`}
+        onChange={onChange}
+        checked={checked}
+      />
+      <label className={styles.tabHeading} htmlFor={`tab-${id}-${ind}`}>
+        {title}
+      </label>
+      {children}
+    </>
+  )
+}
+
 const Toggle: React.FC<{
   children: Array<{ props: { title: string } } | string>
 }> = ({ children }) => {
   const [toggleId, setToggleId] = useState('')
-  const [selectedTabInd, setSelectedTabInd] = useState(0)
+  const {
+    addNewToggle = (): null => null,
+    updateToggleInd = (): null => null,
+    togglesData = {}
+  } = useContext(TogglesContext)
   const tabs: Array<{ props: { title: string } } | string> = children.filter(
     child => child !== '\n'
   )
+  const tabsTitles = tabs.map(tab =>
+    typeof tab === 'object' ? tab.props.title : ''
+  )
 
   useEffect(() => {
     if (toggleId === '') {
-      setToggleId(nanoid())
+      const newId = nanoid()
+      addNewToggle(newId, tabsTitles)
+      setToggleId(newId)
     }
-  }, [])
+
+    if (toggleId && !togglesData[toggleId]) {
+      addNewToggle(toggleId, tabsTitles)
+    }
+  }, [togglesData])
 
   return (
     <div className={styles.toggle}>
       {tabs.map((tab, i) => (
-        <>
-          <input
-            id={`tab-${toggleId}-${i}`}
-            type="radio"
-            name={`toggle-${toggleId}`}
-            onChange={(): void => {
-              setSelectedTabInd(i)
-            }}
-            checked={i === selectedTabInd}
-          />
-          <label
-            className={styles.tabHeading}
-            key={i}
-            htmlFor={`tab-${toggleId}-${i}`}
-          >
-            {typeof tab !== 'string' && tab.props.title}
-          </label>
+        <ToggleTab
+          ind={i}
+          key={i}
+          title={tabsTitles[i]}
+          id={toggleId}
+          checked={
+            i === (togglesData[toggleId] ? togglesData[toggleId].checkedInd : 0)
+          }
+          onChange={(): void => updateToggleInd(toggleId, i)}
+        >
           {tab}
-        </>
+        </ToggleTab>
       ))}
     </div>
   )
 }
 
-const Tab: React.FC<{ title: string }> = ({ children }) => {
-  return <div className={styles.tab}>{children}</div>
-}
+const Tab: React.FC = ({ children }) => (
+  <div className={styles.tab}>{children}</div>
+)
 
 const renderAst = new rehypeReact({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -242,7 +274,9 @@ const Markdown: React.FC<IMarkdownProps> = ({
         <i className={cn(sharedStyles.buttonIcon, styles.githubIcon)} /> Edit on
         GitHub
       </Link>
-      <div className="markdown-body">{renderAst(htmlAst)}</div>
+      <TogglesProvider>
+        <div className="markdown-body">{renderAst(htmlAst)}</div>
+      </TogglesProvider>
       <div className={styles.navButtons}>
         <Link className={styles.navButton} href={prev || '#'}>
           <i className={cn(styles.navButtonIcon, styles.prev)} />

From 7c0b6204c154cc1ef9e82e2beea5ee51e8125062 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Wed, 29 Sep 2021 10:22:40 -0500
Subject: [PATCH 3/6] Fix incorrect css width in Markdown css

---
 src/components/pages/Documentation/Markdown/styles.module.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/pages/Documentation/Markdown/styles.module.css b/src/components/pages/Documentation/Markdown/styles.module.css
index 89dfe236..4a67fde3 100644
--- a/src/components/pages/Documentation/Markdown/styles.module.css
+++ b/src/components/pages/Documentation/Markdown/styles.module.css
@@ -452,7 +452,7 @@ a.card {
     height: initial;
     opacity: initial;
     position: static;
-    width: initial;
+    width: 100%;
     overflow: visible;
   }
 

From 5310591914f10ec596d631cc14b651f4f00aa870 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Wed, 29 Sep 2021 10:23:15 -0500
Subject: [PATCH 4/6] TBD Add example markdown tabs to docs/index.md

---
 content/docs/index.md | 102 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 102 insertions(+)

diff --git a/content/docs/index.md b/content/docs/index.md
index 1791586b..4a535b8f 100644
--- a/content/docs/index.md
+++ b/content/docs/index.md
@@ -6,6 +6,48 @@ projects. Use it to automate parts of your development workflow, including model
 training and evaluation, comparing ML experiments across your project history,
 and monitoring changing datasets.
 
+<toggle>
+<tab title="Tab 1">
+
+Suspendisse vulputate quis tellus vitae dapibus. Vestibulum sit amet gravida
+dolor. Curabitur erat lectus, aliquet vitae orci convallis, varius iaculis
+mauris. Suspendisse sed tellus dolor. `Cras` in fringilla dui, vel malesuada
+libero. Aliquam erat volutpat. Aliquam a felis eros. Sed sagittis felis eu massa
+condimentum molestie. Etiam non pellentesque arcu. Donec sit amet elit justo.
+Curabitur maximus, ipsum ac pulvinar varius, tortor neque tempus arcu, ac
+tincidunt ipsum leo a mauris. Quisque sagittis augue non augue tincidunt semper.
+Sed tortor lorem, pellentesque ac pretium eu, facilisis at neque.
+
+</tab>
+<tab title="Tab 2">
+
+Curabitur bibendum massa et leo mattis cursus. Phasellus eu feugiat velit, sit
+amet commodo metus. Duis ante tortor, rhoncus vel risus eu, ultrices dignissim
+sapien. Maecenas at nisl vitae risus tincidunt varius id sit amet urna. Aenean
+blandit augue tellus, vel mattis sapien accumsan vitae. Mauris mollis enim ut
+justo dictum auctor. Integer sed nisl sit amet **metus varius fringilla**. Morbi
+sit amet sollicitudin dui, nec egestas erat. Donec ullamcorper nulla mauris, non
+volutpat nisi consectetur sit amet. Duis quis feugiat lacus, vitae venenatis
+eros. Aliquam enim odio, vulputate a egestas sed, malesuada vel mauris. Fusce
+efficitur feugiat purus eget convallis. Nam vulputate pretium nisi vel
+porttitor. Duis pretium bibendum congue.
+
+</tab>
+<tab title="Tab 3">
+
+Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
+curae; In pellentesque dolor dui, nec viverra augue interdum quis. Vestibulum
+mattis dui at sapien egestas, non ornare _lacus convallis_. Pellentesque et
+gravida elit. Integer volutpat ligula eu lorem commodo blandit. Maecenas eu
+lobortis felis, eu cursus mi. Maecenas nisi enim, vehicula sit amet tellus
+efficitur, vehicula bibendum nunc. Donec sed sollicitudin dolor. Curabitur
+aliquam metus sed arcu fringilla, ac lobortis odio varius. Suspendisse at elit
+justo. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
+imperdiet.
+
+</tab>
+</toggle>
+
 <cards>
 
   <card href="/doc/start" heading="Get Started">
@@ -26,6 +68,30 @@ and monitoring changing datasets.
 
 </cards>
 
+<toggle>
+<tab title="Tab 1">
+
+```
+cat results.txt >> report.md
+```
+
+</tab>
+<tab title="Tab 2">
+
+```
+cml-publish graph.png --md >> report.md
+```
+
+</tab>
+<tab title="Tab 3">
+
+```
+cd example_cml
+```
+
+</tab>
+</toggle>
+
 ✅ Please join our [community](https://dvc.org/community) or use the
 [support](https://dvc.org/support) channels if you have any questions or need
 specific help. We are very responsive ⚡.
@@ -35,3 +101,39 @@ us a ⭐ if you like the project!
 
 ✅ Contribute to CML [on GitHub](https://github.com/iterative/cml) or help us
 improve this [documentation](https://github.com/iterative/cml.dev) 🙏.
+
+<toggle>
+<tab title="Tab 4">
+
+- m metus sed arcu fringilla, ac lobortis odio varius. Suspendisse at elit
+  justo. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
+  imperdiet.
+- m metus sed arcu fringilla, ac lobortis odio varius. Suspendisse at elit
+  justo. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
+  imperdiet. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
+  imperdiet
+- m metus sed arcu fringilla, ac lobortis odio varius. Suspendisse at elit
+  justo. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
+  imperdiet. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
+  imperdiet
+
+</tab>
+<tab title="Tab 5">
+
+- Vestibulum nec sapien at
+- Praesent in dictum
+- Vestibulum nec sapien at
+- Praesent in dictum
+
+</tab>
+<tab title="Tab 6">
+
+- Maecenas at nisl vitae risus tincidunt variu
+- Maecenas at nisl vitae risus tincidunt variu
+- m metus sed arcu fringilla, ac lobortis odio varius. Suspendisse at elit
+  justo. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
+  imperdiet. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
+  imperdiet
+
+</tab>
+</toggle>

From 584456c9c5d598b7cd355a2e2ffc2728fc191cf2 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Wed, 29 Sep 2021 15:37:31 -0500
Subject: [PATCH 5/6] Move input id in Markdown ToggleTab to variable

---
 src/components/pages/Documentation/Markdown/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/pages/Documentation/Markdown/index.tsx b/src/components/pages/Documentation/Markdown/index.tsx
index eed7dc6f..d5e3bb02 100644
--- a/src/components/pages/Documentation/Markdown/index.tsx
+++ b/src/components/pages/Documentation/Markdown/index.tsx
@@ -128,16 +128,18 @@ const ToggleTab: React.FC<{
   onChange: () => void
   checked: boolean
 }> = ({ children, id, checked, ind, onChange, title }) => {
+  const inputId = `tab-${id}-${ind}`
+
   return (
     <>
       <input
-        id={`tab-${id}-${ind}`}
+        id={inputId}
         type="radio"
         name={`toggle-${id}`}
         onChange={onChange}
         checked={checked}
       />
-      <label className={styles.tabHeading} htmlFor={`tab-${id}-${ind}`}>
+      <label className={styles.tabHeading} htmlFor={inputId}>
         {title}
       </label>
       {children}

From 7ddb47cec0ddb8e3614c1053d1ebdfb1e47cc9f1 Mon Sep 17 00:00:00 2001
From: julieg18 <juliannagal18@gmail.com>
Date: Thu, 30 Sep 2021 11:08:57 -0500
Subject: [PATCH 6/6] Revert "TBD Add example markdown tabs to docs/index.md"

This reverts commit 5310591914f10ec596d631cc14b651f4f00aa870.
---
 content/docs/index.md | 102 ------------------------------------------
 1 file changed, 102 deletions(-)

diff --git a/content/docs/index.md b/content/docs/index.md
index 4a535b8f..1791586b 100644
--- a/content/docs/index.md
+++ b/content/docs/index.md
@@ -6,48 +6,6 @@ projects. Use it to automate parts of your development workflow, including model
 training and evaluation, comparing ML experiments across your project history,
 and monitoring changing datasets.
 
-<toggle>
-<tab title="Tab 1">
-
-Suspendisse vulputate quis tellus vitae dapibus. Vestibulum sit amet gravida
-dolor. Curabitur erat lectus, aliquet vitae orci convallis, varius iaculis
-mauris. Suspendisse sed tellus dolor. `Cras` in fringilla dui, vel malesuada
-libero. Aliquam erat volutpat. Aliquam a felis eros. Sed sagittis felis eu massa
-condimentum molestie. Etiam non pellentesque arcu. Donec sit amet elit justo.
-Curabitur maximus, ipsum ac pulvinar varius, tortor neque tempus arcu, ac
-tincidunt ipsum leo a mauris. Quisque sagittis augue non augue tincidunt semper.
-Sed tortor lorem, pellentesque ac pretium eu, facilisis at neque.
-
-</tab>
-<tab title="Tab 2">
-
-Curabitur bibendum massa et leo mattis cursus. Phasellus eu feugiat velit, sit
-amet commodo metus. Duis ante tortor, rhoncus vel risus eu, ultrices dignissim
-sapien. Maecenas at nisl vitae risus tincidunt varius id sit amet urna. Aenean
-blandit augue tellus, vel mattis sapien accumsan vitae. Mauris mollis enim ut
-justo dictum auctor. Integer sed nisl sit amet **metus varius fringilla**. Morbi
-sit amet sollicitudin dui, nec egestas erat. Donec ullamcorper nulla mauris, non
-volutpat nisi consectetur sit amet. Duis quis feugiat lacus, vitae venenatis
-eros. Aliquam enim odio, vulputate a egestas sed, malesuada vel mauris. Fusce
-efficitur feugiat purus eget convallis. Nam vulputate pretium nisi vel
-porttitor. Duis pretium bibendum congue.
-
-</tab>
-<tab title="Tab 3">
-
-Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
-curae; In pellentesque dolor dui, nec viverra augue interdum quis. Vestibulum
-mattis dui at sapien egestas, non ornare _lacus convallis_. Pellentesque et
-gravida elit. Integer volutpat ligula eu lorem commodo blandit. Maecenas eu
-lobortis felis, eu cursus mi. Maecenas nisi enim, vehicula sit amet tellus
-efficitur, vehicula bibendum nunc. Donec sed sollicitudin dolor. Curabitur
-aliquam metus sed arcu fringilla, ac lobortis odio varius. Suspendisse at elit
-justo. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
-imperdiet.
-
-</tab>
-</toggle>
-
 <cards>
 
   <card href="/doc/start" heading="Get Started">
@@ -68,30 +26,6 @@ imperdiet.
 
 </cards>
 
-<toggle>
-<tab title="Tab 1">
-
-```
-cat results.txt >> report.md
-```
-
-</tab>
-<tab title="Tab 2">
-
-```
-cml-publish graph.png --md >> report.md
-```
-
-</tab>
-<tab title="Tab 3">
-
-```
-cd example_cml
-```
-
-</tab>
-</toggle>
-
 ✅ Please join our [community](https://dvc.org/community) or use the
 [support](https://dvc.org/support) channels if you have any questions or need
 specific help. We are very responsive ⚡.
@@ -101,39 +35,3 @@ us a ⭐ if you like the project!
 
 ✅ Contribute to CML [on GitHub](https://github.com/iterative/cml) or help us
 improve this [documentation](https://github.com/iterative/cml.dev) 🙏.
-
-<toggle>
-<tab title="Tab 4">
-
-- m metus sed arcu fringilla, ac lobortis odio varius. Suspendisse at elit
-  justo. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
-  imperdiet.
-- m metus sed arcu fringilla, ac lobortis odio varius. Suspendisse at elit
-  justo. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
-  imperdiet. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
-  imperdiet
-- m metus sed arcu fringilla, ac lobortis odio varius. Suspendisse at elit
-  justo. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
-  imperdiet. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
-  imperdiet
-
-</tab>
-<tab title="Tab 5">
-
-- Vestibulum nec sapien at
-- Praesent in dictum
-- Vestibulum nec sapien at
-- Praesent in dictum
-
-</tab>
-<tab title="Tab 6">
-
-- Maecenas at nisl vitae risus tincidunt variu
-- Maecenas at nisl vitae risus tincidunt variu
-- m metus sed arcu fringilla, ac lobortis odio varius. Suspendisse at elit
-  justo. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
-  imperdiet. Praesent in dictum leo. Vestibulum nec sapien at tortor molestie
-  imperdiet
-
-</tab>
-</toggle>