CSS and Tabs Added

styles.css

@@ -1,18 +1,3 @@
-/* Empty. change later */
-
-.book {
-    border: 1px solid var(--background-modifier-border);
-    padding: 10px;
-  }
-  
-  .book__title {
-    font-weight: 600;
-  }
-  
-  .book__author {
-    color: var(--text-muted);
-  }
-
 .todo-item {
   display: flex;
   justify-content: flex-start;
@@ -23,7 +8,6 @@
   font-family: Roboto, sans-serif;
   font-weight: normal;
   font-size: 16px;
-  color: #ffffff;
 }
 
 input[type=checkbox] {
@@ -32,4 +16,66 @@ input[type=checkbox] {
 
 input[type=checkbox]:focus {
   outline: 0;
-}
+}
+.plugin-root {
+  min-width: 300px;
+}
+
+/* react-tabs internal file :wink: */
+
+.react-tabs {
+  -webkit-tap-highlight-color: transparent;
+}
+
+.react-tabs__tab-list {
+  border-bottom: 1px solid #aaa;
+  margin: 0 0 10px;
+  padding: 0;
+}
+
+.react-tabs__tab {
+  display: inline-block;
+  border: 1px solid transparent;
+  border-bottom: none;
+  bottom: -1px;
+  position: relative;
+  list-style: none;
+  padding: 1% 2%;
+  cursor: pointer;
+  font-size: medium;
+}
+
+.react-tabs__tab--selected {
+  background: var(--interactive-accent);
+  color: white;
+  border-radius: 5px 5px 0 0;
+}
+
+.react-tabs__tab--disabled {
+  color: GrayText;
+  cursor: default;
+}
+
+.react-tabs__tab:focus {
+  box-shadow: 0 0 5px hsl(208, 99%, 50%);
+  border-color: hsl(208, 99%, 50%);
+  outline: none;
+}
+
+.react-tabs__tab:focus:after {
+  content: "";
+  position: absolute;
+  height: 5px;
+  left: -4px;
+  right: -4px;
+  bottom: -5px;
+  background: #fff;
+}
+
+.react-tabs__tab-panel {
+  display: none;
+}
+
+.react-tabs__tab-panel--selected {
+  display: block;
+}