JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<ul class="tabsmenu">
    <li><a href="#tab1" class="tabtitle active">Tab 1</a></li> 
    <li><a href="#tab2" class="tabtitle">Tab 2</a></li>
    <li><a href="#tab3" class="tabtitle">Tab 3</a></li> 
    <li><a href="#tab4" class="tabtitle">Tab 4</a></li> 
    <li><a href="#tab5" class="tabtitle">Tab 5</a></li>
</ul>
<div class="tabscontainer">
    <div id="tab1" class="active">Tab1 text<br /> Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br />  Tab1 text<br /> </div>
    <div id="tab2"> Tab2 text <br />  Tab2 text <br />  Tab2 text <br />  Tab2 text <br />  Tab2 text <br />  Tab2 text <br />  Tab2 text <br />  Tab2 text <br />  Tab2 text <br />  </div> 
    <div id="tab3">Tab3 text</div> 
    <div id="tab4">Tab4 text</div> 
    <div id="tab5">Tab5 text</div> 
</div>
<noscript>
.tabscontainer div {
    display: block;
}  
</noscript>

CSS

/* стиль для реализации вкладок без таблицы */
.tabsmenu li {
    float: left;
}
.tabsmenu:after {
    content: "";
    display: block;
    clear: both;
}
/* стиль вкладок */
.tabtitle {
    display: inline-block;
    padding: 5px 20px;
    text-decoration: none;
    border: 1px solid gray;
}
/* стиль для активной вкладки */
.tabtitle.active {
    color: red;
}

/* стиль для контейнера содержимого вкладок */
.tabscontainer {
    height: 200px; /* рекомендуется фиксированная высота, чтобы не происходило дергания форума вверх-вниз при переключении между вкладками */
    overflow: auto;/* добавит полосу прокрутки, если размер содержимого превышает размер контейнера */
    border: 1px solid #999999;
    /* фон вставлять сюда */
}
/* стиль для блока с содержимым */
.tabscontainer div {
    display: none; /* по умолчанию скрыты все кроме активного */
} 
/* стиль для активного блока с содержимым */
.tabscontainer .active {
    display: block;
}

JavaScript

/* магия делается здесь */
$(".tabtitle").click(function(e) {
    $(".tabscontainer .active, .tabtitle.active ").removeClass("active");
    $($(this).addClass("active").attr("href")).addClass("active");
    e.preventDefault();
});