JSFiddle - React, Tailwind, and code Playground

by Sergey Aleshin

HTML

<ul class="nav">
    <li onClick="view_tab('first_tab')">Первая вкладка</li>
    <li onClick="view_tab('second_tab')">Вторая вкладка</li>
    <li onClick="view_tab('third_tab')">Третья вкладка</li>
    <li onClick="view_tab('third_tab')">Третья вкладка</li>
    <li onClick="view_tab('third_tab')">Третья вкладка</li>
</ul>

<div id="box">
    <span id="tab" tab="first_tab">Первая вкладка...<br>1...</span>
    <span id="tab" tab="second_tab">Вторая вкладка...<br>2...</span>
    <span id="tab" tab="third_tab">Третья вкладка...<br>3...</span>
    <span>Простой текст</span>
</div>

CSS

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

.nav {
    padding: 0px;
    margin: 0;
    list-style: none;
    cursor: pointer;
}
.nav li {
  display: inline-block;
  padding: 10px 15px;
  margin: 4px 2px;
  border-radius: 5px;
  background-color: rgba(0, 0, 0, 0.1);
  font-family: Roboto;
  font-size: 16px;
}
.nav li:hover {
    background-color: rgba(2, 120, 174, 0.4)
}
.nav li:active {
    background-color: rgba(2, 120, 174, 1)
}

#box {
    padding: 5px;
    
    border: 1px solid #ddd;
}
#box #tab {
    display: none;
}
#box #tab:first-child {
    display: block;
}

JavaScript

view_tab = function(tab) {
    var box = document.getElementById("box"),
        childs = box.getElementsByTagName("*");
    for (var i=0; i < childs.length; i++) {
        if (childs[i].getAttribute("tab")){
            childs[i].style.display = "none";
        }
        if (childs[i].getAttribute("tab") == tab) {
            childs[i].style.display = "block";
        }
    }
}