feat: improve tabs demos

shuriken-ui · Dec 10, 2023 · 83ff154 · 83ff154
1 parent 419112c
commit 83ff154
Showing 1 changed file with 4 additions and 4 deletions.
diff --git a/src/plugins/components/tabs/tabs.doc.mdx b/src/plugins/components/tabs/tabs.doc.mdx
@@ -22,7 +22,7 @@ Tabs allow you to seaparate your content in different togglable areas.
 
 Tabs can have different alignment. Below is an example of the start alignment.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={TabsStories.Start} />
 </div>
 
@@ -32,7 +32,7 @@ Tabs can have different alignment. Below is an example of the start alignment.
 
 Tabs can have different alignment. Below is an example of the center alignment.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={TabsStories.Center} />
 </div>
 
@@ -42,7 +42,7 @@ Tabs can have different alignment. Below is an example of the center alignment.
 
 Tabs can have different alignment. Below is an example of the end alignment.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={TabsStories.End} />
 </div>
 
@@ -52,7 +52,7 @@ Tabs can have different alignment. Below is an example of the end alignment.
 
 Tabs can have and additional "boxed" or "pill" variant.
 
-<div className="flex gap-2 bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+<div className="border border-muted-200 dark:border-muted-800 bg-white dark:bg-slate-900 p-6 rounded-sm">
   <Story of={TabsStories.Boxed} />
 </div>