diff --git a/assets/events.ts b/assets/events.ts
index 470fb3e701c496e65d853d9f3b64a7345dbe2d1b..6d4b7b2440f93f49272e79da525b2689f7542813 100644
--- a/assets/events.ts
+++ b/assets/events.ts
@@ -116,18 +116,22 @@ function $tab(ev: MouseEvent) {
   let target = ev.target;
   let link = (target as HTMLElement).getAttribute("data-link");
 
-  let linkElement = document.getElementById(link);
-  linkElement.style.display = "block";
+  document.getElementById(link).style.display = "block";
 }
 
 export function tabs() {
-  const labels = document.querySelectorAll(".tab-label");
-  const tabs = document.querySelectorAll(".tab");
+  // Find all tab wrappers
+  let wrappers = document.querySelectorAll(".wrapper");
 
-  let defaultTab = (tabs[tabs.length - 1] as HTMLElement) || null;
-  defaultTab.style.display = "block";
-  for (let i = 0; i < labels.length; i++)
-    labels[i].addEventListener("click", $tab);
+  for (let i = 0; i < wrappers.length; i++) {
+    const labels = wrappers[i].querySelectorAll(".tab-label");
+    const tabs = wrappers[i].querySelectorAll(".tab");
+
+    // Set the first tab in a group to display
+    ((tabs[0] as HTMLElement) || null).style.display = "block";
+    for (let i = 0; i < labels.length; i++)
+      labels[i].addEventListener("click", $tab);
+  }
 }
 
 export function dropdowns() {
diff --git a/layouts/shortcodes/tabs.html b/layouts/shortcodes/tabs.html
index b650496a832d3ff77466928b974ceac71908189d..88c72c53e474d12a68087c570d2275b9bfb9a5e9 100644
--- a/layouts/shortcodes/tabs.html
+++ b/layouts/shortcodes/tabs.html
@@ -5,16 +5,17 @@
     <ul>
       {{ range $idx, $txt := $labels }} {{- $link := replace $txt "/" "-"}}
       <li class="tab-label-wrapper">
+        
         {{ if or (eq $link "js-sw") (eq $link "ts-sw") }}
         <svg xmlns="http://www.w3.org/2000/svg" style="height: 51px">
           <path
             d="M25.7 30q-.75 0-1.225-.475Q24 29.05 24 28.3V26h2.4v1.6h5.2v-2.65h-5.9q-.7 0-1.2-.5t-.5-1.2V19.7q0-.75.475-1.225Q24.95 18 25.7 18h6.6q.75 0 1.225.475Q34 18.95 34 19.7V22h-2.4v-1.6h-5.2v2.65h5.9q.7 0 1.2.5t.5 1.2v3.55q0 .75-.475 1.225Q33.05 30 32.3 30Zm-12 0q-.75 0-1.225-.475Q12 29.05 12 28.3V25h2.4v2.6h4.2V18H21v10.3q0 .75-.475 1.225Q20.05 30 19.3 30Z"
           />
         </svg>
-        <a class="tab-label" href="#" data-link="tab-{{$link}}"
-          >Service Workers</a
-        >
-        {{ end }} {{ if or (eq $link "js-esm") (eq $link "ts-esm") }}
+        <a class="tab-label" href="#" data-link="tab-{{$link}}">Service Workers</a>
+        {{ end }}
+        
+        {{ if or (eq $link "js-esm") (eq $link "ts-esm") }}
         <svg
           xmlns="http://www.w3.org/2000/svg"
           style="height: 51px; width: 49px"
diff --git a/static/style.css b/static/style.css
index bf3e7a8d84e41ebdf4f46284223a5d2cc200c503..2a38421ff487fbaa82ee4ea390d214e3b799272f 100644
--- a/static/style.css
+++ b/static/style.css
@@ -4497,7 +4497,10 @@ pre {
 }
 
 .tab-label-wrapper {
+  display: flex;
   width: 25%;
+  align-items: center;
+  flex-direction: row;
   margin-bottom: 0;
   list-style-type: none;
   box-shadow: 1px 0 rgba(var(--shadow-color-rgb), 0.12);
@@ -4515,9 +4518,6 @@ pre {
 
 .tab-label {
   position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   white-space: nowrap;
   height: 2.5rem;
   padding: 0.6em 1.25em;