Fix tabbed styling

assets/sass/_tabbed.scss

@@ -0,0 +1,36 @@
+.tabbed {
+    background-color: rgba(black, 0.25);
+    border-radius: 1rem;
+    padding: 1rem;
+
+    .tab-header {
+        display: flex;
+        flex-direction: row;
+
+        div {
+            user-select: none;
+            cursor: pointer;
+
+            padding: 0 0.25rem;
+            margin: 0 0.25rem;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &.active {
+                border-bottom: 1px solid $accent-color;
+            }
+        }
+    }
+
+    .tab-content {
+        &>div {
+            .highlight {
+                pre {
+                    background-color: transparent !important;
+                }
+            }
+        }
+    }
+}

assets/sass/app.scss

@@ -17,6 +17,7 @@
 // Component-specific styling
 @import "compact-list";
 @import "pagination";
-@import "list";
+@import "tabbed";
 @import "code";
 @import "copy";
+@import "list";

layouts/shortcodes/codegroup.html

@@ -4,9 +4,9 @@
         {{ $lines := split . "\n" }}
         {{ $title := index $lines 1}}
 
-        <span role="button" data-tab-index="{{ $index }}">
+        <div role="button" data-tab-index="{{ $index }}" tabindex="0">
             {{ $title }}
-        </span>
+        </div>
 
         {{ end }}
     </div>