Set Tabs component styles.

packages/components/src/components/Tabs/Tabs.style.ts

@@ -18,15 +18,20 @@ export let makeStyles = ({
       flex-basis: content;
       padding: ${spacing.m} ${spacing.l};
       cursor: pointer;
-      border: 1px solid white;
+      border-bottom: 3px solid ${colors.gray[900]};
+      min-width: 100px;
+      color: ${colors.gray[200]};
+      text-align: center;
     `,
     activeTab: css`
       flex-basis: content;
       padding: ${spacing.m} ${spacing.l};
       cursor: pointer;
-      border: 1px solid white;
-      color: black;
-      background-color: white;
+      color: ${colors.white};
+      background-color: transparent;
+      border-bottom: 3px solid ${colors.blue[500]};
+      min-width: 100px;
+      text-align: center;
     `
   }
 }

packages/components/stories/11-Tabs.stories.tsx

@@ -9,7 +9,7 @@ export default {
 
 export const Default = () => (
   <div style={{ backgroundColor: "black", padding: "50px 20px" }}>
-    <Tabs>
+    <Tabs onChange={tab => console.log(`Active tab: ${tab}`)}>
       <Tab label="Tab 1">tab 1</Tab>
       <Tab label="Tab 2">tab 2</Tab>
       <Tab label="Tab 3">tab 3</Tab>