JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 <div class="tabs tabs--main js-tabs-multiplay">
     <ul class="tabs__header">
         <li class="tabs__control tabs__control--active" data-tab="first">
             <a class="tabs__link link" href="#"><span class="tabs__text">Правила сервиса</span></a>
         </li>
         <li class="tabs__control" data-tab="second">
             <a class="tabs__link link" href="#"><span class="tabs__text">FAQ</span></a>
         </li>
         <li class="tabs__control" data-tab="third">
             <a class="tabs__link link" href="#"><span class="tabs__text">Обратная связь</span></a>
         </li>
     </ul>
     <div class="tabs__item tabs__item--active tabs__first animated">
         <div class="tabs tabs-secondary">
             <ul class="tabs__header tabs-secondary__header">
                 <li class="tabs__control tabs-secondary__control tabs__control--active" data-tab="first-child">
                     <a class="tabs__link tabs-secondary__link link" href="#"><span class="tabs__text tabs-secondary__text">Реклама</span></a>
                 </li>
                 <li class="tabs__control tabs-secondary__control" data-tab="second-child">
                     <a class="tabs__link tabs-secondary__link link" href="#"><span class="tabs__text tabs-secondary__text">Сайты</span></a>
                 </li>
                 <li class="tabs__control tabs-secondary__control" data-tab="third-child">
                     <a class="tabs__link tabs-secondary__link link" href="#"><span class="tabs__text tabs-secondary__text">Обмен</span></a>
                 </li>
                 <li class="tabs__control tabs-secondary__control" data-tab="four-child">
                     <a class="tabs__link tabs-secondary__link link" href="#"><span class="tabs__text tabs-secondary__text">Помощь</span></a>
                 </li>
             </ul>
             <div class="tabs__item tabs-secondary__item...

CSS

.tabs__header {
  text-align: center;
    list-style: none;
}
.tabs__control {
 display: inline-block;
}
.tabs__link {
  position: relative;
  text-decoration: none;
}
.tabs__text {
  font-size: 18px;
}
.tabs__item {
  display: none;
}
.tabs__item--active {
  display: block;
}
.tabs__item--centered {
  text-align: center;
}
.tabs--main .tabs__header {
  margin: 0 0 30px 0;
  border-bottom: 1px solid #e4e9ec;
}
.tabs--main .tabs__control {
  height: 60px;
  padding: 0 30px;
}
.tabs--main .tabs__control--active .tabs__link {
  color: #3D424D;
}
.tabs--main .tabs__control--active .tabs__link:after {
  content: '';
  width: 100%;
  height: 2px;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #3D424D;
}
.tabs--main .tabs__link {
  display: block;
  text-decoration: none;
}
.tabs--main .tabs__text {
  line-height: 60px;
}
.tabs--clients .tabs__header {
  margin: 0 0 105px 0;
}
.tabs--commercial .tabs__link {
  color: #777E8B;
}
.tabs--commercial .tabs__link--active {
  color: #4487ff;
  border-bottom: 1px dashed #4487ff;
  cursor: pointer;
}

JavaScript

jQuery('.tabs .tabs__link').on('click', function(e){
            e.preventDefault();
            var itemTab = jQuery(this).closest('.tabs__control'),
                contentTab = jQuery('.tabs__item'),
                itemPosition = itemTab.data('tab');
            contentTab.filter('.tabs__'+itemPosition).addClass('tabs__item--active fadeIn').siblings().removeClass('tabs__item--active fadeIn');
            itemTab.addClass('tabs__control--active').siblings().removeClass('tabs__control--active');
        });