JSFiddle - React, Tailwind, and code Playground

HTML

<div id="tabs-wrapper">
    <div class="tab">
        <span class="tab-title" tab="1">Первая вкладка</span>
        <div class="tab-content" tab-content="1">
            Содержимое первой вкладки
        </div>
    </div>
    <div class="tab">
        <span class="tab-title" tab="2">Вторая вкладка</span>
        <div class="tab-content" tab-content="2">
            Содержимое второй вкладки
        </div>
    </div>
    <div class="tab">
        <span class="tab-title" tab="3">Третья вкладка</span>
        <div class="tab-content" tab-content="3">
            Содержимое третьей вкладки
        </div>
    </div>
</div>

CSS

body {
    font-family: "Arial";
    font-size: 14px;
}

.tab .tab-title {
    display: block;
    padding: 10px;
    
    border-bottom: 1px solid #222;
    background-color: blue;
    color: white;
    
    cursor: pointer;
}

.tab .tab-content {
    display: none;
    padding: 5px 10px;
    
    border-bottom: 1px solid #222;
}

JavaScript

var tabs_wrapper = document.getElementById("tabs-wrapper"),
    elems = tabs_wrapper.getElementsByTagName("*");

for (var i=0; i<elems.length; i++) {
    if (elems[i].getAttribute("tab")) {
        elems[i].onclick = function (e) {
            if (e.target.className.indexOf("opened") < 0) e.target.className = e.target.className +" opened";
            else e.target.className = e.target.className.split(" ")[0];
            for (var i=0; i<elems.length; i++) {
                if (elems[i].getAttribute("tab-content") == e.target.getAttribute("tab")) {
                    if (elems[i].style.display == "") elems[i].style.display = "block";
                    else elems[i].style.display = "";
                }
            }
        }
    }
}