JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<div id="one"></div>

<div id="two"></div>
<!-- <div>
  Hello World
</div> -->
<!--
Build a tab component using plain HTML/CSS/JavaScript.

In case you forget any API method, attribute name, etc, you can search on any reference website like MDN, etc. You are not allowed to search for the solution of the problem.

Try to use all the best practices you know about HTML, CSS and JavaScript to build this component.

Mockup:
https://i.imgur.com/Qk71XWl.jpg

Please make the component fully functional. The content can be static in the HTML.
-->

CSS

.tab-nav{
  overflow:hidden;
  border:1px solid black;
  background-color:gray;
  padding:10px;
}

.tabs button{
  background-color:gray;
  float:left;
  outline:none;
  border:none;
}
.tab-content {
  display:none;
  padding:20px;
}

JavaScript

class TabComponent {
	constructor(id,tabs){
  	this.id = id;
    this.tabs = tabs;
  	this.constructLinks();
    this.addContents();
  }

	constructLinks(){
  	let elem = document.createElement("DIV");
    elem.className = "tab-nav"
    for (let tab of this.tabs){
    	let tablink = document.createElement("BUTTON")
      tablink.className = "tab-link";
      let text = document.createTextNode(tab.text)
      tablink.appendChild(text)
      tablink.addEventListener('click',(evt)=>{
      	this.tabClicked(evt.target,this.id)
        });
      elem.appendChild(tablink)
    }
    document.getElementById(this.id).className = "tabs"
    document.getElementById(this.id).appendChild(elem);
  }
  
  addContents(){
   for(let tab of this.tabs){
   	let content = document.createElement("DIV");
    content.className = "tab-content";
    content.className += " "+tab.text;
    let text = document.createTextNode(tab.content);
    content.appendChild(text)
 		document.getElementById(this.id).appendChild(content);
   }
  }
  tabClicked(elem,id){
  	console.log(elem)
    elem.className += " active"
    let selector = "#"+id+" ."+elem.innerHTML
    let content = document.querySelector(selector);
    let allcontent = document.querySelector("#"+id+" .tab-content");
    allcontent.style.display = "none"
    
    content.style.display = "block";
  }
}

let tb =new TabComponent("one",[{'text':"tab-one","content":"this is text for para 1"},{'text':"tab-two","content":"This is content for para 2"}])

let tb2 =new TabComponent("two",[{'text':"tab-x","content":"this is text for para x"},{'text':"tab-y","content":"This is content for para y"}])