<section class="tabs">
  <div class="tabs-buttons">
    <div class="tab bg-red" data-id="1">Кнопка 1</div>
    <div class="tab bg-green" data-id="2">Кнопка 2</div>
    <div class="tab bg-yellow" data-id="3">Кнопка 3</div>
  </div>
  <div class="tabs-contents">
    <div class="content bg-red id-1">
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Doloribus maiores et expedita quaerat culpa aperiam earum non dolorem facere quas, qui obcaecati tempore quae unde inventore delectus laboriosam incidunt? Eum.
    </div>
    <div class="content bg-green id-2">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit esse illum aperiam magni error optio placeat, ab dolorem maiores quos quisquam sed impedit molestiae quibusdam minima eveniet mollitia. Maxime, ipsum!
    </div>
    <div class="content bg-yellow id-3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero sit assumenda ea quos quibusdam laudantium totam voluptatem nam voluptates vero dolore est, minima in esse accusamus doloribus molestias sed expedita!
    </div>
  </div>
</section>

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap");
html {
  font-family: "Roboto", sans-serif;
}
body {
  background-color: #666666;
}
*,
*::after,
*::before {
  margin: 0;
}

.bg-red {
  background: rgb(250, 112, 112);
}
.bg-green {
  background: rgb(88, 255, 124);
}
.bg-yellow {
  background: rgb(253, 242, 83);
}

.tabs {
  margin: 20px;
  min-width: 256px;
  max-width: 300px;
}
.tab {
  padding: 10px 15px;
  color: white;
  cursor: pointer;
}
.tabs-buttons {
  display: flex;
  flex-wrap: wrap;
}
.content {
  display: none;
  padding: 1rem;
}
.content.active {
  display: block;
}

document.querySelectorAll(".tabs").forEach(function (tabs) {
  const tabList = tabs.querySelectorAll(".tab");
  tabList.forEach(function (tab) {
    tab.addEventListener("click", function (event) {
      const clickedTab = event.target;
      const tabTarget = tabs.querySelector(`.id-${clickedTab.dataset.id}`);
      if (tabTarget.classList.contains("active")) {
        tabTarget.classList.remove("active");
      } else {
        tabs.querySelectorAll(".content").forEach(function (content) {
          content.classList.remove("active");
        });
        tabTarget.classList.add("active");
      }
    });
  });
});