JSFiddle - React, Tailwind, and code Playground

HTML

<div class="tabs">
    <ul>
        <li>Первая</li>
        <li>Вторая</li>
        <li>Третья</li>
    </ul>
    <div>
        <div class="tab">Первое содержимое</div>
        <div class="tab">Второе содержимое</div>
        <div class="tab">Третье содержимое</div>
    </div>            
</div>

<div class="tabs">
    <ul>
        <li>Первая</li>
        <li>Вторая</li>
        <li>Третья</li>
    </ul>
    <div>
        <div class="tab">Первое содержимое</div>
        <div class="tab">Второе содержимое</div>
        <div class="tab">Третье содержимое</div>
    </div>            
</div>

CSS

.tabs, .tabs2{
    display:inline-block;
}
.tabs > div, .tabs2 > div{
    padding-top:10px;
}
.tabs ul, .tabs2 ul{
    margin:0px;
    padding:0px;
}
.tabs ul:after, .tabs2 ul:after{
    content:"";
    display:block;
    clear:both;
    height:5px;
    background:#46c765;
}
.tabs ul li, .tabs2 ul li{
    margin:0px;
    padding:0px;
    cursor:pointer;
    display:block;
    float:left;
    padding:10px 15px;
    background:#e9eaeb;
    color:#707070;
}
.tabs ul li.active, .tabs2 ul li.active, .tabs ul li.active:hover, .tabs2 ul li.active:hover{
    background:#46c765;
    color:#fff;
}
.tabs ul li:hover, .tabs2 ul li:hover{
    background:#d6d6d7;
}

JavaScript

function lightTabs (el) {
  var tabs = $(el);
  tabs.each(function() {
  	var i = 0;
		var tab = $(this).find(".tab");
    var li = $(this).find("li");
   
    li.eq(i).addClass("active");
    tab.hide();
    tab.eq(i).show();

    li.click(function(e){
      $(this).addClass("active").siblings().removeClass("active");
      tab.hide().eq($(this).data('page')).show();
      e.preventDefault();
    });
    
    li.each(function(index, element){
        $(element).attr("data-page", i);
        i++;
    });


  });

}

$(document).ready(function(){

	lightTabs ('.tabs');
  
 });