refactor: update examples

src/components/DocsExample.vue

@@ -1,9 +1,10 @@
 <template>
   <div class="example">
-    <CNav variant="tabs">
+    <CNav variant="underline-border">
       <CNavItem>
         <CNavLink href="#" active>
           <CIcon icon="cil-media-play" class="me-2" />
+          Preview
         </CNavLink>
       </CNavItem>
       <CNavItem>
@@ -13,7 +14,7 @@
         </CNavLink>
       </CNavItem>
     </CNav>
-    <CTabContent class="rounded-bottom">
+    <CTabContent :class="['rounded-bottom', addClass]">
       <CTabPane class="p-3 preview" visible>
         <slot></slot>
       </CTabPane>
@@ -25,16 +26,15 @@
 export default {
   name: 'DocsExample',
   props: {
-    href: {
-      type: String,
-      default: undefined,
-      required: false,
-    },
+    href: String,
+    tabContentClass: String,
   },
   setup(props) {
     const url = `https://coreui.io/vue/docs/${props.href}`
-
+    const addClass = props.tabContentClass
+ 
     return {
+      addClass,
       url,
     }
   },