revamp template

src/plugins/components/tabs.js

@@ -0,0 +1,38 @@
+ 
+import plugin from 'tailwindcss/plugin';
+
+export default plugin(({addComponents, theme}) => {
+  // Base
+  addComponents({
+    '.tabs': {
+      'display': 'flex',
+      'align-items': 'center',
+      'gap': theme('spacing.5'),
+      'border-bottom': '1px solid var(--tw-gray-200)'
+    },
+    '.tab': {
+      'display': 'inline-flex',
+      'align-items': 'center',
+      'gap': theme('spacing')['2'],
+      'font-size': theme('fontSize.2sm'),
+      'line-height': '1',
+      'color': 'var(--tw-gray-700)',
+      'i': {
+        'font-size': theme('fontSize.md'),
+        'color': 'var(--tw-gray-600)',
+      },
+      'font-weight': theme('fontWeight.medium'),
+      'padding': `${theme('spacing.4')} 0`,
+      'border-bottom': '2px solid transparent',
+      '&.active, &:hover, &:focus': {
+        'color': 'var(--tw-primary)',
+        'i': {
+          'color': 'var(--tw-primary)'
+        }
+      },
+      '&.active': {
+        'border-bottom-color': 'var(--tw-primary)'
+      }
+    } 
+  }); 
+});