JSFiddle - React, Tailwind, and code Playground

by Fabio Dan

HTML

<div class="tab-assembly">
  <div class="tab-row">
    <div class="tab-label">
      TAB A
      <div class="tab-contents">
        First content b
      </div>
    </div>
    <div class="tab-label">
      TAB B
      <div class="tab-contents">
        Second content a
      </div>
    </div>
  </div>
  <div class="tab-container">
  </div>
</div>
<div class="tab-assembly">
  <div class="tab-row">
    <div class="tab-label">
      TAB C
      <div class="tab-contents">
        Third content
      </div>
    </div>
    <div class="tab-label">
      TAB C
      <div class="tab-contents">
        Etc
      </div>
    </div>
  </div>
  <div class="tab-container">
  </div>
</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-assembly {
  width:   100%;
  height:  200px;
  margin-top: 4px;
  margin-bottom: 4px;
  background: #F0F0F0;
}
.tab-contents {
  display: none;
}
.tab-assembly .tab-row {
  display: flex;
}

.tab-assembly .tab-row .tab-label {
  flex: auto;
  text-align: center;
  font-family: sans-serif;
  font-size: 20px;
  padding: 4px;
  background: #FFFFFF;
  border: 2px solid #404040;
  cursor: pointer;
}
.tab-assembly .tab-container {
  padding: 8px;
  font-family: sans-serif;
  font-size: 17px;
  border: 2px solid #606060;
  min-height: 120px;
}

JavaScript

let tabs = document.getElementsByClassName("tab-label");
let containers = document.getElementsByClassName("tab-container");
for(let ix=0; ix<tabs.length; ix++){
  let tab = tabs[ix];
  tab.addEventListener("click",assert(tab,ix))
 };
function assert(tab,ix){
  return function(ev){
    let ct = Math.floor(ix/2);
    let contents = tab.getElementsByClassName("tab-contents")[0].innerHTML;
    containers[ct].innerHTML = contents;
  }
}
for(let j=0; j<containers.length; j++){
  let ix  = j+j;
  let tab = tabs[ix];
  assert(tab,ix)()
}