JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class='tabs'>
  <div class='tab-container'></div>
  <div class='tab-content'></div>
</div>

CSS

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

.tab-container {
  display: flex;
}

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

.tabs-key:hover {
  background-color: darkgrey;
}

.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!"
};

let activeTab = 'en';

function init() {
	const tabContainer = document.querySelector('.tab-container');
  const tabContent = document.querySelector('.tab-content');
  
  function renderContent() {
  	for(let [key,value] of Object.entries(translations)) {
    	const tabKey = document.createElement('div')
      tabKey.textContent = key;
      tabKey.classList.add('tabs-key');
      tabKey.addEventListener('click', () => {renderCard(key)});
      
      tabContainer.appendChild(tabKey)
    }
  }
  
  function renderCard(key) {
  	tabContent.innerHTML = '';
    activeTab = key;
  	tabContent.textContent = translations[activeTab];
  }
  
  renderCard(activeTab);
  renderContent();
}

init();