diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
index a67309a67dc..1709c39e379 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -437,3 +437,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
   );
 };
 ```
+
+### Nested tabs
+```js isFullscreen file="./Tabs/NestedTabsDemo.js"
+```
\ No newline at end of file
diff --git a/packages/react-core/src/demos/Tabs/NestedTabsDemo.js b/packages/react-core/src/demos/Tabs/NestedTabsDemo.js
new file mode 100644
index 00000000000..66d3bbc482d
--- /dev/null
+++ b/packages/react-core/src/demos/Tabs/NestedTabsDemo.js
@@ -0,0 +1,151 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Grid,
+  GridItem,
+  PageSection,
+  PageSectionVariants,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import DashboardWrapper from '../examples/DashboardWrapper';
+
+export const NestedTabsDemo = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState(0);
+  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
+
+  // Toggle currently active tab
+  const handleTabClick = (_, tabIndex) => setActiveTabKey(tabIndex);
+
+  // Toggle currently active nested tab
+  const handleNestedTabClick = (_, tabIndex) => setActiveNestedTabKey(tabIndex);
+
+  const tabContent = (
+    <Grid hasGutter>
+      <GridItem xl={8} md={6}>
+        <Card>
+          <CardHeader>
+            <Title headingLevel="h2">Status</Title>
+          </CardHeader>
+          <CardBody>
+            <Flex direction={{ default: 'column' }}>
+              <FlexItem>
+                <Tabs
+                  activeKey={activeNestedTabKey}
+                  isSecondary
+                  onSelect={handleNestedTabClick}
+                  id="nested-tabs-example-tabs-list"
+                >
+                  <Tab eventKey={10} title={<TabTitleText>Cluster</TabTitleText>} tabContentId={`tabContent${10}`} />
+                  <Tab
+                    eventKey={11}
+                    title={<TabTitleText>Control plane</TabTitleText>}
+                    tabContentId={`tabContent${11}`}
+                  />
+                  <Tab eventKey={12} title={<TabTitleText>Operators</TabTitleText>} tabContentId={`tabContent${12}`} />
+                  <Tab
+                    eventKey={13}
+                    title={<TabTitleText>Virtualization</TabTitleText>}
+                    tabContentId={`tabContent${13}`}
+                  />
+                </Tabs>
+              </FlexItem>
+              <FlexItem>
+                <TabContent
+                  key={10}
+                  eventKey={10}
+                  id={`tabContent${10}`}
+                  activeKey={activeNestedTabKey}
+                  hidden={10 !== activeNestedTabKey}
+                >
+                  <TabContentBody>
+                    {
+                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in odio porttitor, feugiat risus in, feugiat arcu. Nullam euismod enim eget fringilla condimentum. Maecenas tincidunt et metus id aliquet. Integer et fermentum purus. Nulla tempor velit arcu, vitae semper purus iaculis at. Sed malesuada auctor luctus. Pellentesque et leo urna. Aliquam vitae felis congue lacus mattis fringilla. Nullam et ultricies erat, sed dignissim elit. Cras mattis pulvinar aliquam. In ac est nulla. Pellentesque fermentum nibh ac sapien porta, ut congue orci aliquam. Sed nisl est, tempor eu pharetra eget, ullamcorper ut augue. Vestibulum eleifend libero eu nulla cursus lacinia.'
+                    }
+                  </TabContentBody>
+                </TabContent>
+                <TabContent
+                  key={11}
+                  eventKey={11}
+                  id={`tabContent${11}`}
+                  activeKey={activeNestedTabKey}
+                  hidden={11 !== activeNestedTabKey}
+                >
+                  <TabContentBody>Control plane panel</TabContentBody>
+                </TabContent>
+                <TabContent
+                  key={12}
+                  eventKey={12}
+                  id={`tabContent${12}`}
+                  activeKey={activeNestedTabKey}
+                  hidden={12 !== activeNestedTabKey}
+                >
+                  <TabContentBody>Operators panel</TabContentBody>
+                </TabContent>
+                <TabContent
+                  key={13}
+                  eventKey={13}
+                  id={`tabContent${13}`}
+                  activeKey={activeNestedTabKey}
+                  hidden={13 !== activeNestedTabKey}
+                >
+                  <TabContentBody>Virtualization panel</TabContentBody>
+                </TabContent>
+              </FlexItem>
+            </Flex>
+          </CardBody>
+        </Card>
+      </GridItem>
+      <GridItem xl={4} md={6}>
+        <Flex direction={{ default: 'column' }} className="pf-u-h-100">
+          <FlexItem flex={{ default: 'flex_1' }}>
+            <Card isFullHeight>
+              <CardHeader>
+                <Title headingLevel="h3">Title of Card</Title>
+              </CardHeader>
+            </Card>
+          </FlexItem>
+          <FlexItem flex={{ default: 'flex_1' }}>
+            <Card isFullHeight>
+              <CardHeader>
+                <Title headingLevel="h3">Title of Card</Title>
+              </CardHeader>
+            </Card>
+          </FlexItem>
+        </Flex>
+      </GridItem>
+    </Grid>
+  );
+
+  return (
+    <DashboardWrapper hasNoBreadcrumb>
+      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+        <Title headingLevel="h1" size="2xl">
+          Overview
+        </Title>
+      </PageSection>
+      <PageSection type="tabs" variant={PageSectionVariants.light} isWidthLimited>
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="nested-tabs-example-tabs-list">
+          <Tab eventKey={0} title={<TabTitleText>Cluster 1</TabTitleText>} tabContentId={`tabContent${0}`} />
+          <Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
+        </Tabs>
+      </PageSection>
+      <PageSection isWidthLimited>
+        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+          <TabContentBody>{tabContent}</TabContentBody>
+        </TabContent>
+        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+          <TabContentBody>Cluster 2 panel</TabContentBody>
+        </TabContent>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};