<div class="tabs">
  <div class="tabs__head">
    <button class="tabs__btn tabs__btn--active">Tab-1</button>
    <button class="tabs__btn">Tab-2</button>
    <button class="tabs__btn">Tab-3</button>
    <button class="tabs__btn">Tab-4</button>
    <button class="tabs__btn">Tab-5</button>
  </div>
  <div class="tabs__body">
    <div class="tabs__box tabs__box--active">
      <b>Tab-1</b>
      <br>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit rerum veritatis laboriosam, ea repellendus iusto a odio cum dignissimos deserunt consequatur quidem temporibus eligendi tenetur aut tempora, mollitia illo doloribus.</div>
    <div class="tabs__box">
      <b>Tab-2</b>
      <br>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut nostrum magni minus quam, eos molestiae vel accusamus quo. Esse error incidunt perspiciatis beatae quis provident tenetur natus repellendus, officiis nesciunt.</div>
    <div class="tabs__box">
      <b>Tab-3</b>
      <br>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio a asperiores reiciendis porro quasi. Labore officia quos officiis modi numquam eius, corrupti necessitatibus magni maxime placeat. Consequuntur consequatur excepturi sapiente.</div>
    <div class="tabs__box">
      <b>Tab-4</b>
      <br>
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Laborum, error nesciunt debitis illum ea hic minima tempora dolore dolorem nobis? Ad ea corrupti error qui delectus quod sequi, incidunt pariatur?</div>
    <div class="tabs__box">
      <b>Tab-5</b>
      <br>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste veritatis vero cupiditate unde exercitationem libero perspiciatis non odio ipsa qui officiis id inventore asperiores voluptatem illo, dolores magni velit iusto!</div>
  </div>
</div>

.tabs {
  border: 1px solid #000;
  padding: 5px 0;
  margin: 0 auto;
  max-width: 300px;
  &__head {
    display: flex;
    overflow-x: scroll;
    width: 100%;
  }
  &__btn {
    margin: 0 5px;
    border: 1px solid #000;
    padding: 5px 10px;
    white-space: nowrap;
    cursor: pointer;
    &--active {
      font-weight: 700;
    }
  }
  &__body {
    padding: 10px 5px; 
  }
  &__box {
    display: none;
    border: 1px solid #000;
    padding: 5px 10px;
    &--active {
      display: block;
    }
  }
}

const tabs = document.querySelector('.tabs')
const btns = document.querySelectorAll('.tabs__btn')
const boxes = document.querySelectorAll('.tabs__box')

tabs.addEventListener('click', e => {
  if(e.target.classList.contains('tabs__btn') && !e.target.classList.contains('tabs__btn--active')) {
    btns.forEach((el, i) => {
      el.classList.remove('tabs__btn--active')
      boxes[i].classList.remove('tabs__box--active')
    })
    e.target.classList.add('tabs__btn--active')
    let indexBtn = [...btns].indexOf(e.target)
    boxes[indexBtn].classList.add('tabs__box--active')
  }
})