JSFiddle - React, Tailwind, and code Playground

HTML

<dl class='tab horizontal'>
    <dt class='active'>Заголовок 1</dt>
    <dd class='active'>Текст вкладки</dd>
    <dt>Заголовок4</dt>
    <dd>Текст вкладки 2</dd>
</dl>
<dl class='tab horizontal'>
    <dt class='active'>Заголовок 1</dt>
    <dd class='active'>Текст вкладки</dd>
    <dt>Заголовок3</dt>
    <dd>Текст вкладки 2</dd>
</dl>
<dl class='tab horizontal'>
    <dt class='active'>Заголовок 1</dt>
    <dd class='active'>Текст вкладки</dd>
    <dt>Заголовок2</dt>
    <dd>Текст вкладки 2</dd>
</dl>

CSS

/* Горизонтальные horizontal */
.tab.horizontal {
width:100%;
overflow:hidden;
font-size:0.9em;
margin:2em 0;
zoom:1;
padding:1px;
position:relative;
}
.tab.horizontal>dt {
float:left;
line-height:2;
height:2em;
background:#FF5F01;
border:1px solid #FF5F01;
border-bottom:0;
padding:0 1em;
position:relative;
left:35px;
margin-right:1px;
cursor:pointer;
}
.tab.horizontal>dt:hover, .tab.horizontal>dt.active{
background-color:#F1592A;
color:#fff;
}
.tab.horizontal>dt.active {
z-index:3;
cursor:auto;
}
.tab.horizontal>dd {
display:none;
float:right;
width:100%;
margin:2em 0 0 -100%;
position:relative;
z-index:2;
}
.tab.horizontal>dd.active {
display:block;
}
.tab.horizontal>dd>div.tab-content {
border:1px solid #FF5F01;
padding:20px;
}
/* Вертикальные vertical*/
.tab.vertical>dd{
    background:#fff;
    display:none;
    width:100%;
    z-index:2;
    margin: 0;
}
.tab.vertical>dd>div.tab-content{
    padding: 5px 10px;
}
.tab.vertical>dt{
    padding: 4px 10px;
    cursor:pointer;
    background: #FF5F01;
    border-bottom:1px solid #fff;
    cursor:pointer;
}
.tab.vertical>dt.active, .tab.vertical>dt:hover {
	border-color:#FF5F01;
	background: #F1592A;
    color: #fff;
    border-bottom:1px solid #fff;
}
.tab.vertical>dd.active{display:block;}
.tab.vertical{
    margin: 0;
    zoom:1;
    width:100%;
    border: 1px solid #FF5F01;
    padding: 1px 1px 0 1px;
}
.tab.vertical>dt.active  {
z-index:3;
cursor:auto;
}

JavaScript

(function ($) {
    $('dl.tab').on('click', 'dt', function (event) {
    if(event.target != this) return;
    event.stopPropagation();
     $(this).siblings().removeClass('active').end().next('dd').andSelf().addClass('active');
    }).children('dd').each(function () {
        $(this).wrapInner('<div class="tab-content"></div>');
    });
})(jQuery);