New classes

src/styles/classes.sass

@@ -1,3 +1,6 @@
+@use '/src/styles/variables.sass' as vars
+@use 'sass:color'
+
 .fullscreen
   position: absolute
   top: 0
@@ -7,3 +10,105 @@
   object-fit: cover
   z-index: -1
   opacity: 1
+
+.tabs
+  width: 100%
+
+  &[data-orientation="vertical"]
+    display: flex
+
+  &__list
+    position: relative
+    display: flex
+    gap: 5rem
+
+  &__list[data-orientation="horizontal"]
+    align-items: center
+
+  &__list[data-orientation="vertical"]
+    flex-direction: column
+    align-items: stretch
+
+  &__indicator
+    position: absolute
+    background-color: color.adjust(vars.$background, $lightness: 20%)
+    transition: all 250ms
+
+  &__indicator[data-orientation="horizontal"]
+    bottom: -1px
+    height: 3px
+
+  &__indicator[data-orientation="vertical"]
+    right: -1px
+    width: 2px
+
+  &__trigger
+    // display: inline-block
+    // padding: 8px 16px
+    // outline: none
+    // cursor: pointer
+    background-color: transparent
+    border: none
+    border-radius: 6px 6px 0 0
+    color: vars.$textColor
+    padding: 0.75rem 1.75rem
+    width: 10rem
+    text-align: center
+    text-decoration: none
+    display: inline-block
+    font-size: 1rem
+    font-weight: 500
+    cursor: pointer
+    // transition: all 0.2s ease-out
+
+  &__trigger:hover
+    background-color: color.adjust(vars.$background, $lightness: 20%)
+    // color: hsl(240 5% 34%)
+
+  &__trigger:focus-visible
+    // background-color: hsl(240 5% 96%)
+
+.tabs__trigger[data-disabled],
+.tabs__trigger[data-disabled]:hover
+  opacity: 0.5
+  background-color: transparent
+
+.tabs__content
+  padding: 16px
+
+.table
+  width: 90%
+  border-collapse: collapse
+  margin: 2rem
+  box-shadow: inset 0 1px 2px #16212C, 0 2px 4px #2a3f5332, 0 4px 8px #344c654e
+
+  th, td
+    // border: 1px solid vars.$tableBorderColor
+    padding: 0.75rem
+    text-align: left
+    font-size: 1rem
+
+  th
+    background-color: vars.$tableHeaderBackground
+    color: vars.$textColor
+    padding: 1rem
+
+  th:nth-child(1)
+    text-align: center
+    border-radius: 1rem 0 0 0
+
+  th:nth-child(3)
+    border-radius: 0 1rem 0 0
+
+  td
+    background-color: rgba(color.adjust(vars.$background, $blackness: 5%), 0.8)
+
+  td:nth-child(1)
+    width: 10rem
+    text-align: center
+
+  td:nth-child(3)
+    width: 8.75rem
+
+  tbody tr:nth-child(even) 
+    background-color: rgba(color.adjust(vars.$background, $lightness: 10%), 0.8)