diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.js b/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.js
new file mode 100644
index 00000000000000..2cc84eb66fdcc3
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.js
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import TabPanel from '@mui/base/TabPanel';
+import { buttonClasses } from '@mui/base/Button';
+import Tab, { tabClasses } from '@mui/base/Tab';
+
+export default function UnstyledTabsCustomized() {
+  return (
+    <React.Fragment>
+      <Tabs defaultValue={1}>
+        <TabsList className="CustomTabsList">
+          <Tab className="CustomTab" value={1}>
+            One
+          </Tab>
+          <Tab className="CustomTab" value={2}>
+            Two
+          </Tab>
+          <Tab className="CustomTab" value={3}>
+            Three
+          </Tab>
+        </TabsList>
+        <TabPanel className="CustomTabPanel" value={1}>
+          First page
+        </TabPanel>
+        <TabPanel className="CustomTabPanel" value={2}>
+          Second page
+        </TabPanel>
+        <TabPanel className="CustomTabPanel" value={3}>
+          Third page
+        </TabPanel>
+      </Tabs>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style>
+      {`
+      .CustomTabsList {
+        min-width: 400px;
+        background-color: ${cyan[500]};
+        border-radius: 12px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-content: space-between;
+        box-shadow: 0px 4px 6px ${
+          isDarkMode ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
+        };
+      }
+
+      .CustomTab {
+        font-family: 'IBM Plex Sans', sans-serif;
+        color: white;
+        cursor: pointer;
+        font-size: 0.875rem;
+        font-weight: bold;
+        background-color: transparent;
+        width: 100%;
+        line-height: 1.5;
+        padding: 8px 12px;
+        margin: 6px;
+        border: none;
+        border-radius: 8px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .CustomTab:hover {
+        background-color: ${cyan[400]};
+      }
+
+      .CustomTab:focus {
+        color: #fff;
+        outline: 3px solid ${cyan[200]};
+      }
+
+      .CustomTab.${tabClasses.selected} {
+        background-color: #fff;
+        color: ${cyan[600]};
+      }
+
+      .CustomTab.${buttonClasses.disabled} {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .CustomTabPanel {
+        width: 100%;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: 0.875rem;
+      }
+      `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.tsx b/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.tsx
new file mode 100644
index 00000000000000..2cc84eb66fdcc3
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/css/index.tsx
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { useTheme } from '@mui/system';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import TabPanel from '@mui/base/TabPanel';
+import { buttonClasses } from '@mui/base/Button';
+import Tab, { tabClasses } from '@mui/base/Tab';
+
+export default function UnstyledTabsCustomized() {
+  return (
+    <React.Fragment>
+      <Tabs defaultValue={1}>
+        <TabsList className="CustomTabsList">
+          <Tab className="CustomTab" value={1}>
+            One
+          </Tab>
+          <Tab className="CustomTab" value={2}>
+            Two
+          </Tab>
+          <Tab className="CustomTab" value={3}>
+            Three
+          </Tab>
+        </TabsList>
+        <TabPanel className="CustomTabPanel" value={1}>
+          First page
+        </TabPanel>
+        <TabPanel className="CustomTabPanel" value={2}>
+          Second page
+        </TabPanel>
+        <TabPanel className="CustomTabPanel" value={3}>
+          Third page
+        </TabPanel>
+      </Tabs>
+      <Styles />
+    </React.Fragment>
+  );
+}
+
+const cyan = {
+  50: '#E9F8FC',
+  100: '#BDEBF4',
+  200: '#99D8E5',
+  300: '#66BACC',
+  400: '#1F94AD',
+  500: '#0D5463',
+  600: '#094855',
+  700: '#063C47',
+  800: '#043039',
+  900: '#022127',
+};
+
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
+function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+  return (
+    <style>
+      {`
+      .CustomTabsList {
+        min-width: 400px;
+        background-color: ${cyan[500]};
+        border-radius: 12px;
+        margin-bottom: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        align-content: space-between;
+        box-shadow: 0px 4px 6px ${
+          isDarkMode ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
+        };
+      }
+
+      .CustomTab {
+        font-family: 'IBM Plex Sans', sans-serif;
+        color: white;
+        cursor: pointer;
+        font-size: 0.875rem;
+        font-weight: bold;
+        background-color: transparent;
+        width: 100%;
+        line-height: 1.5;
+        padding: 8px 12px;
+        margin: 6px;
+        border: none;
+        border-radius: 8px;
+        display: flex;
+        justify-content: center;
+      }
+
+      .CustomTab:hover {
+        background-color: ${cyan[400]};
+      }
+
+      .CustomTab:focus {
+        color: #fff;
+        outline: 3px solid ${cyan[200]};
+      }
+
+      .CustomTab.${tabClasses.selected} {
+        background-color: #fff;
+        color: ${cyan[600]};
+      }
+
+      .CustomTab.${buttonClasses.disabled} {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .CustomTabPanel {
+        width: 100%;
+        font-family: 'IBM Plex Sans', sans-serif;
+        font-size: 0.875rem;
+      }
+      `}
+    </style>
+  );
+}
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized.js b/docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.js
similarity index 85%
rename from docs/data/base/components/tabs/UnstyledTabsCustomized.js
rename to docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.js
index 0c69d127ebb942..e7e1a46e3ec724 100644
--- a/docs/data/base/components/tabs/UnstyledTabsCustomized.js
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.js
@@ -34,19 +34,6 @@ const blue = {
   900: '#003A75',
 };
 
-const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
-};
-
 const StyledTab = styled(Tab)`
   font-family: 'IBM Plex Sans', sans-serif;
   color: white;
@@ -55,10 +42,11 @@ const StyledTab = styled(Tab)`
   font-weight: bold;
   background-color: transparent;
   width: 100%;
-  padding: 12px;
+  line-height: 1.5;
+  padding: 8px 12px;
   margin: 6px;
   border: none;
-  border-radius: 7px;
+  border-radius: 8px;
   display: flex;
   justify-content: center;
 
@@ -98,6 +86,8 @@ const StyledTabsList = styled(TabsList)(
   align-items: center;
   justify-content: center;
   align-content: space-between;
-  box-shadow: 0px 4px 8px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
+  };
   `,
 );
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx b/docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx
similarity index 85%
rename from docs/data/base/components/tabs/UnstyledTabsCustomized.tsx
rename to docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx
index 0c69d127ebb942..e7e1a46e3ec724 100644
--- a/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx
@@ -34,19 +34,6 @@ const blue = {
   900: '#003A75',
 };
 
-const grey = {
-  50: '#f6f8fa',
-  100: '#eaeef2',
-  200: '#d0d7de',
-  300: '#afb8c1',
-  400: '#8c959f',
-  500: '#6e7781',
-  600: '#57606a',
-  700: '#424a53',
-  800: '#32383f',
-  900: '#24292f',
-};
-
 const StyledTab = styled(Tab)`
   font-family: 'IBM Plex Sans', sans-serif;
   color: white;
@@ -55,10 +42,11 @@ const StyledTab = styled(Tab)`
   font-weight: bold;
   background-color: transparent;
   width: 100%;
-  padding: 12px;
+  line-height: 1.5;
+  padding: 8px 12px;
   margin: 6px;
   border: none;
-  border-radius: 7px;
+  border-radius: 8px;
   display: flex;
   justify-content: center;
 
@@ -98,6 +86,8 @@ const StyledTabsList = styled(TabsList)(
   align-items: center;
   justify-content: center;
   align-content: space-between;
-  box-shadow: 0px 4px 8px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 4px 6px ${
+    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.4)' : 'rgba(0,0,0, 0.2)'
+  };
   `,
 );
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized.tsx.preview b/docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx.preview
similarity index 100%
rename from docs/data/base/components/tabs/UnstyledTabsCustomized.tsx.preview
rename to docs/data/base/components/tabs/UnstyledTabsCustomized/system/index.tsx.preview
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js
new file mode 100644
index 00000000000000..8225fc8abf7eef
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.js
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import TabPanel from '@mui/base/TabPanel';
+import Tab from '@mui/base/Tab';
+
+export default function UnstyledTabsCustomized() {
+  return (
+    <Tabs defaultValue={1}>
+      <TabsList className="mb-4 rounded-xl bg-purple-500 flex items-center justify-center content-between min-w-tabs-list shadow-lg">
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-lg flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={1}
+        >
+          One
+        </Tab>
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={2}
+        >
+          Two
+        </Tab>
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={3}
+        >
+          Three
+        </Tab>
+      </TabsList>
+      <TabPanel className="w-full text-sm" value={1}>
+        First page
+      </TabPanel>
+      <TabPanel className="w-full text-sm" value={2}>
+        Second page
+      </TabPanel>
+      <TabPanel className="w-full text-sm" value={3}>
+        Third page
+      </TabPanel>
+    </Tabs>
+  );
+}
diff --git a/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx
new file mode 100644
index 00000000000000..8225fc8abf7eef
--- /dev/null
+++ b/docs/data/base/components/tabs/UnstyledTabsCustomized/tailwind/index.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import Tabs from '@mui/base/Tabs';
+import TabsList from '@mui/base/TabsList';
+import TabPanel from '@mui/base/TabPanel';
+import Tab from '@mui/base/Tab';
+
+export default function UnstyledTabsCustomized() {
+  return (
+    <Tabs defaultValue={1}>
+      <TabsList className="mb-4 rounded-xl bg-purple-500 flex items-center justify-center content-between min-w-tabs-list shadow-lg">
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-lg flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={1}
+        >
+          One
+        </Tab>
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={2}
+        >
+          Two
+        </Tab>
+        <Tab
+          slotProps={{
+            root: ({ selected, disabled }) => ({
+              className: `${
+                selected
+                  ? 'text-purple-500 bg-white'
+                  : 'text-white bg-transparent focus:text-white hover:bg-purple-400'
+              } ${
+                disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'
+              } text-sm font-bold w-full p-2 m-1.5 border-0 rounded-md flex justify-center focus:outline-0 focus:shadow-outline-purple-light`,
+            }),
+          }}
+          value={3}
+        >
+          Three
+        </Tab>
+      </TabsList>
+      <TabPanel className="w-full text-sm" value={1}>
+        First page
+      </TabPanel>
+      <TabPanel className="w-full text-sm" value={2}>
+        Second page
+      </TabPanel>
+      <TabPanel className="w-full text-sm" value={3}>
+        Third page
+      </TabPanel>
+    </Tabs>
+  );
+}
diff --git a/docs/data/base/components/tabs/tabs.md b/docs/data/base/components/tabs/tabs.md
index 00015eaa339be5..33c4d498852975 100644
--- a/docs/data/base/components/tabs/tabs.md
+++ b/docs/data/base/components/tabs/tabs.md
@@ -65,7 +65,7 @@ The following demo omits the `value` prop from the Tab components, and also defi
 
 The next demo shows how to apply custom styles to a set of tabs:
 
-{{"demo": "UnstyledTabsCustomized.js"}}
+{{"demo": "UnstyledTabsCustomized"}}
 
 ### Anatomy
 
diff --git a/docs/src/modules/sandbox/CreateReactApp.ts b/docs/src/modules/sandbox/CreateReactApp.ts
index b3ef543481f1e7..8975ff610990e3 100644
--- a/docs/src/modules/sandbox/CreateReactApp.ts
+++ b/docs/src/modules/sandbox/CreateReactApp.ts
@@ -33,8 +33,9 @@ export const getHtml = ({
           extend: {
             boxShadow: {
               'outline-purple': '0 0 0 4px rgba(192, 132, 252, 0.25)',
+              'outline-purple-light': '0 0 0 4px rgba(245, 208, 254, 0.25)',
               'outline-purple-xs': '0 0 0 1px rgba(192, 132, 252, 0.25)',
-              'outline-switch': '0 0 1px 8px rgba(0, 0, 0, 0.25)',
+              'outline-switch': '0 0 1px 8px rgba(168, 85, 247, 0.35)',
             },
             cursor: {
               inherit: 'inherit',
@@ -55,6 +56,7 @@ export const getHtml = ({
               badge: '22px',
               listbox: '200px',
               snackbar: '300px',
+              'tabs-list': '400px',
             },
             maxWidth: {
               snackbar: '560px',
diff --git a/docs/tailwind.config.js b/docs/tailwind.config.js
index 4d30eb1255daa5..44baa508006bbe 100644
--- a/docs/tailwind.config.js
+++ b/docs/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
     extend: {
       boxShadow: {
         'outline-purple': '0 0 0 4px rgba(192, 132, 252, 0.25)',
+        'outline-purple-light': '0 0 0 4px rgba(245, 208, 254, 0.25)',
         'outline-purple-xs': '0 0 0 1px rgba(192, 132, 252, 0.25)',
         'outline-switch': '0 0 1px 8px rgba(168, 85, 247, 0.35)',
       },
@@ -36,6 +37,7 @@ module.exports = {
         badge: '22px',
         listbox: '200px',
         snackbar: '300px',
+        'tabs-list': '400px',
       },
       maxWidth: {
         snackbar: '560px',