JSFiddle - React, Tailwind, and code Playground

by vlit

HTML

<div class="tabs">

        <a class="tabsnl" href="#tab1">Вкладка 1</a>
         <div class="tabsb" id="tab1">
            <h2>Это вкладка 1</h2>
            <p>Это пример вкладки</p>
            <p>Lorem ipsum dolor sit amet,фыв фыв фыв consectetur adipisicing elit. Aliquid cum in perferendis perspiciatis
                placeat similique soluta. Autem beatae eaque eum exercitationem id in nam optio, repudiandae
                placeat similique soluta. Autem beatae eaque eum exercitationem id in nam optio, repudiandae
                placeat similique soluta. Autem beatae eaque eum exercitationem id in nam optio, repudiandae
                placeat similique soluta. Autem beatae eaque eum exercitationem id in nam optio, repudiandae
                sed sit vel vitae?</p>
        </div>
        <a class="tabsnl" href="#tab2">Вкладка 2</a>
            <div class="tabsb" id="tab2">
            <h2>Это вкладка 2</h2>
            <p>Это пример вкладки</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum in perferendis perspiciatis
                placeat similique soluta. Aute фыв фыв фыв фывфыв фывв ыфm beatae eaque eum exercitationem id in nam optio, repudiandae
                sed sit vel vitae?</p>
        </div>
        <a class="tabsnl" href="#tab3">Вкладка 3</a>
        <div class="tabsb" id="tab3">
            <h2>Это вкладка 3</h2>
            <p>Это пример вкладки</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid cum in perferendis perspiciatis
                placeat similique soluta. Autem beatae eaque eum exercitationem id in nam optio, repudiandae
                sed sit vel vitae?</p>
        </div>


</div>

CSS

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  padding: 40px;
  margin: 0;
  font-family: 'Neucha', cursive;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #111;
  max-width: 600px;
}
.tabsnl {
  display: block;
  width: 100%;
  text-decoration: none;
  color: #fff;
  background: #111;
  padding: 15px 30px;
  text-align: center;
}

.tabsnl--active {
  background: #ff0;
  color: #111;
  font-weight: bold;
}

.tabsb {
  width: 100%;
  padding: 15px 30px;
  display: none;
}

.tabsb--active {
  display: block;
}

@media (min-width: 700px) {
  .tabsnl {
    width: 33%;
    flex-grow: 1;
  }

  .tabsb {
    order: 2;
  }
}

JavaScript

window.addEventListener("load", function() {
        const tabs = document.querySelectorAll(".tabsnl");
        const blocks = document.querySelectorAll(".tabsb");

        tabs.forEach(tab => tab.addEventListener("click", (e) => {

          e.preventDefault();

          let activeTab = document.querySelector(".tabsnl--active");
          let href = e.target.getAttribute('href');
          let block = document.querySelector(href);

          if (e.target === activeTab) {
            e.target.classList.remove("tabsnl--active");
            block.classList.remove("tabsb--active");
          } else {
            tabs.forEach(tab => tab.classList.remove("tabsnl--active"));
            blocks.forEach(block => block.classList.remove("tabsb--active"));
            e.target.classList.add("tabsnl--active");
            block.classList.add("tabsb--active").slideToggle("slow");
          }

        }))
      })