JSFiddle - React, Tailwind, and code Playground

by IllusionMH

HTML

<table class="tabsmenu">
    <tr>
      <td><a href="#tab1" class="tabtitle">Tab 1</a></td>  <!-- атрибут href должен содержать # и id соответствующего ему контейнера -->
      <td><a href="#tab2" class="tabtitle active">Tab 2</a></td><!--у активного по умолчанию элемента должен присутствовать класс active --> 
      <td><a href="#tab3" class="tabtitle">Tab 3</a></td> 
      <td><a href="#tab4" class="tabtitle">Tab 4</a></td> 
      <td><a href="#tab5" class="tabtitle">Tab 5</a></td> 
    </tr>
<tr>
     <td class="tdcontainer" colspan="5"><!-- conspan должен быть равен кол-ву вкладок -->
<div class="tabscontainer"><!-- все контейнеры с содержимым для вкладок должны находится в этом блоке -->
    <div id="tab1">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"> Default tab <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>
    </td>
    </tr>    
 </table> 
<noscript>
.tabscontainer div {
    display: block;
}  
</noscript>

CSS

body {
    color: white;
}
/* стиль для реализации вкладок на основе таблицы */
.tabsmenu {
    border-collapse: collapse;
    border-spacing: 0;
    width: 90%;
}
.tabsmenu td {
    padding: 0 2px 0 0;/* компенсирует 2 пикселя границы у ссылки */
}
td.tdcontainer {
    padding: 0; /* убирается отступ для ячейки с контейнером */
}
/* стиль вкладок */
.tabsmenu a.tabtitle {
    display: inline-block;
    width: 100%; /* максимально растягиваем ячейки */
    padding: 5px 0; /* поля сверху/снизу */
    
    /* стили оформления */
    text-align: center;
    text-decoration: none;
    border: 1px solid gray; /* для компенсации необходимо задать padding для ячеек выше */
    border-radius: 10px 10px 0 0;
    color: gray;
    border-bottom: none;
}
/* стиль для активной вкладки */
.tabsmenu a.tabtitle.active {
    color: white;
    background-color: #021832;
}

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

JavaScript

/* магия делается здесь */
(function() {
    var tabs = $(".tabtitle").click(function(e) {
        $(".tabtitle.active").removeClass("active");
        $(".tabscontainer .active")
            .slideUp(600)
            .removeClass("active");
        $($(this).addClass("active").attr("href")).addClass("active").slideDown(600);
        e.preventDefault();
    });
   // $(".tabscontainer div").css("display", "none");
    ((tabs.filter(".active").length === 1) ? tabs.filter(".active") : tabs.eq(0)).click();
})();