JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
  <ul>
    <li class="tab active">Product Overview</li>
    <li class="tab">Specifications</li>
    <li class="tab">Related products</li>
  </ul>
</div>

SCSS

.tabs {
  display: inline-block;
  ul {
    list-style-type: none;
    li {
      cursor: pointer;
      float: left;
      padding: 10px 40px;
      background: #FDFDFD;
      &.active {
        background: #8F95B0;
        color: #FFF;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
      }
    }
  }
}

JavaScript

var tabs = document.getElementsByClassName('tab');

    for (var t = 0; t < tabs.length; t++){
      tabs[t].addEventListener('click', function(){
       document.querySelector(".active").classList.remove("active")
       this.classList.add('active');
      }, false);
    }