JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabview">
  <div class="tab">
    <button class="tabs-buttons__btn tabs-buttons__btn_active btn-js">Tab 1</button>
    <button class="tabs-buttons__btn btn-js">Tab 2</button>
    <button class="tabs-buttons__btn btn-js">Tab 3</button>
  </div>

  <div class="tabs-sections">
    <div class="tabs-sections__section tabs-sections__section_active tab-js tab-active-js">
      <p>HTML</p>
    </div>
    <div class="tabs-sections__section tab-js">
      <p>CSS</p>
    </div>
    <div class="tabs-sections__section tab-js">
      <p>Javascript</p>
    </div>
  </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-js { display: none; }
.tab-active-js { display: block; }

.tabs-header {
  font-size: 25px;
  text-align: center;
  margin: 3rem auto; }

.centering-layer {
  width: 100%;
  max-width: 800px;
  margin: 2rem auto; }

.tabs-buttons {
  font-size: 14px; }

  .tabs-buttons__btn {
    display: block;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
    border: 2px solid #4EC6DE;
    border-bottom-width: 0;
    color: #333;
    background-color: #fff;
    outline: none;
    padding: 12px 20px;
    cursor: pointer;
    transition: background-color .3s; }

  .tabs-buttons__btn:hover,
  .tabs-buttons__btn--active {
    color: #fff;
    background-color: #4EC6DE; }


.tabs-sections {
  padding: 10px 20px;
  border: 2px solid #4EC6DE; }


@media screen and (min-width: 640px) {
  .tabs-buttons {
    font-size: 0; }

  .tabs-buttons__btn {
    width: auto;
    display: inline-block;
    font-size: 14px; }

  .tabs-buttons__btn:not(:last-child) {
    margin-right: 5px; }
}


/* .tab {
  overflow: hidden;
  border: 1px solid black
}

.tab button {
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

.tab button:hover {
  background-color: #ddd;
}

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

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
 */

JavaScript

/* function tab(e, tab) {

  let tabcontent = document.getElementsByClassName('tabcontent');
  let tablinks = document.getElementsByClassName('tablinks');

  for (let i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = 'none';
  }

  for (let i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(' active', '');
  }

  document.getElementById(tab).style.display = 'block';
  e.currentTarget.className += ' active';
} */


class Tab {
  constructor(opts) {
    const {
    	container,
      tabs,
      buttons,
      activeBtnClass,
      activeTabClass
    } = opts;
    let activeIndex = 0;
    let buttonIndex;
    let eventBtn;
    let goToTab;
    let clearActiveClasses;
  }


  /**
  sets event handlers for each button
  @param {number} index is a number of current button
  */
  eventBtn(buttons, index) {
  console.log('buttons', buttons)
    buttons.addEventListener('click', (btn) => {
      btn.preventDefault();
      goToTab(index);
    });
  }

  /**
  toggles active class
  
  */
  goToTab(index) {
    clearActiveClasses()
    // switch classes
    if (index >= 0 && index <= buttons.length) {
      buttons[index].classList.add(activeBtnClass);
      tabs[index].classList.add(activeTabClass);
      activeIndex = index;
    }
  }

  clearActiveClasses() {
    for (let tab = 0; tab < tabs.length; tab++) {
      tab[tab].classList.remove(activeTabClass);
    }

    for (let button = 0; button < buttons.length; button++) {
      buttons[button].classList.remove(activeBtnClass);
    }


  }
  console.log('container', container);
}

const container = document.querySelector('.tabview');
new Tab({
  container,
  buttons: container.querySelectorAll('.btn-js'),
  tabs: container.querySelectorAll('.tab-js'),
  activeBtnClass: 'tabs-buttons__btn-active',
  activeTabClass: 'tab-active=js'
});