Ghost snippet for multi tab code editor - uses Tailwind for styling

multitab-code-editor-html-snippet.html

<div class="multitab-code-editor">
  <div class="border-b border-gray-200 dark:border-gray-700">
    <nav class="flex space-x-2" aria-label="Tabs" role="tablist">
      <button type="button" class="tab-title" id="tab-1" data-hs-tab="#tab-1" aria-controls="tab-1" role="tab">
        JavaScript
      </button>
      <button type="button" class="tab-title" id="tab-2" data-hs-tab="#tab-2" aria-controls="tab-2" role="tab">
        TypeScript
      </button>
      <button type="button" class="tab-title" id="tab-3" data-hs-tab="#tab-3" aria-controls="tab-3" role="tab">
        Go
      </button>
    </nav>
  </div>

  <div class="mt-3">
    <div id="content-tab-1" class="active" role="tabpanel" aria-labelledby="content-tab-1">
      <pre>
        <code class="language-javascript">
console.log("Hello World from tab-1")
        </code>
      </pre>
    </div>

    <div id="content-tab-2" class="" role="tabpanel" aria-labelledby="content-tab-2">
      <pre>
        <code class="language-typescript">
console.log("Hello World from tab-2")
        </code>
      </pre>
    </div>

    <div id="content-tab-3" class="" role="tabpanel" aria-labelledby="content-tab-3">
      <pre>
        <code class="language-go">
package main

import "fmt"

func main() {
  fmt.Println("hello world")
}
        </code>
      </pre>
    </div>
  </div>
</div>
<script>
// Get all tab buttons and content containers
var tabButtons = document.querySelectorAll("button[role='tab']");
var tabContents = document.querySelectorAll("div[role='tabpanel']");

// Add click event listeners to all tab buttons
tabButtons.forEach((button) => {
  button.addEventListener("click", handleTabClick);
});

// Show the first tab content by default (if needed)
tabContents[0].classList.add("active");
tabButtons[0].classList.add("active");

// Function to handle tab clicks
function handleTabClick(event) {
  const clickedButton = event.currentTarget;
  const targetContentId = clickedButton.getAttribute("aria-controls");

  // Hide all content first
  tabContents.forEach((content) => {
    content.classList.remove("active");
  });

  // Show the clicked tab's content
  const targetContent = document.getElementById(`content-${targetContentId}`);
  targetContent.classList.add("active");
  
  // Remove active class from all buttons
  tabButtons.forEach((button) => {
    button.classList.remove("active");
  });

  // Add active class to the clicked button
  clickedButton.classList.add("active");
};
</script>

style-for-multitab-editor.css

.multitab-code-editor button[role="tab"].active {
  color: var(--primary, green);
  border-bottom: 1px solid var(--primary, green);
}

/* Hide all content by default */
.multitab-code-editor div[role="tabpanel"] {
  display: none;
}

/* Show the active content */
.multitab-code-editor div[role="tabpanel"].active {
  display: block;
}

.multitab-code-editor .tab-title {
  //style your tabs here
}