JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="tabs">
  <div class="tab-headers" id="tab-headers"></div>
  <div class="tab-content" id="tab-content"></div>
</div>

CSS

body {
  font-family: Arial, sans-serif;
}

.tabs {
  width: 300px;
  margin: 0 auto;
}

.tab-header {
  display: inline-block;
  padding: 10px 20px;
  background-color: #eee;
  cursor: pointer;
  margin-right: 10px;
}

.tab-header.active {
  background-color: #ccc;
}

.tab-content {
  padding: 20px;
  border: 1px solid #ccc;
  margin-top: 10px;
}

JavaScript

const translations = {
  en: "Hello, welcome to our website!",
  fr: "Bonjour, bienvenue sur notre site web!",
  es: "Hola, bienvenido a nuestro sitio web!"
};

const tabHeaders = document.getElementById("tab-headers");
const tabContent = document.getElementById("tab-content");

// Set default active tab
let activeTab = "en";

// Create dynamic tabs based on translations
for (const lang in translations) {
  const tabHeader = document.createElement("div");
  tabHeader.className = "tab-header";
  tabHeader.textContent = lang;
  tabHeader.addEventListener("click", () => changeTab(lang));
  tabHeaders.appendChild(tabHeader);
}

// Initial content rendering
renderContent();

function changeTab(lang) {
  activeTab = lang;
  renderContent();
  updateActiveTabStyle();
}

function renderContent() {
  tabContent.textContent = translations[activeTab];
}

function updateActiveTabStyle() {
  const tabHeadersArray = Array.from(tabHeaders.children);
  tabHeadersArray.forEach(tabHeader => {
    tabHeader.classList.remove("active");
    if (tabHeader.textContent === activeTab) {
      tabHeader.classList.add("active");
    }
  });
}