JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<ul class="tabs">
	<li><a href="#tab1">Технические характеристики</a></li>
	<li><a href="#tab2">Комплектации</a></li>
	<li><a href="#tab3">Фото</a></li>
</ul>
<div class="tab_container">
<div class="tab_content" id="tab1">
<h2>Технические характеристики</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum nisi, egestas et mi semper, interdum gravida dolor. In vitae scelerisque orci, sed interdum orci. In hac habitasse platea dictumst. Vivamus vitae velit adipiscing, porttitor sem in, egestas lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus lacinia viverra. Duis a quam vitae magna pellentesque laoreet quis id ipsum. Morbi commodo, augue nec ullamcorper euismod, tortor massa convallis erat, vel egestas lorem urna ut justo. Aliquam erat volutpat. Integer sagittis iaculis purus, sed tempus sem. Donec non commodo metus. Donec lacinia ligula ut porta rutrum. Nam mi neque.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum nisi, egestas et mi semper, interdum gravida dolor. In vitae scelerisque orci, sed interdum orci. In hac habitasse platea dictumst. Vivamus vitae velit adipiscing, porttitor sem in, egestas lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In dapibus lacinia viverra. Duis a quam vitae magna pellentesque laoreet quis id ipsum. Morbi commodo, augue nec ullamcorper euismod, tortor massa convallis erat, vel egestas lorem urna ut justo. Aliquam erat volutpat. Integer sagittis iaculis purus, sed tempus sem. Donec non commodo metus. Donec lacinia ligula ut porta rutrum. Nam mi neque.
<ul class="tabs_child">
	<li><a href="#tab11">Модификация</a></li>
	<li><a href="#tab12">Модификация</a></li>
	<li><a href="#tab13">Модификация</a></li>
</ul>
<div class="tab_container_child">
<div class="tab_content_child" id="tab11">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ipsum nisi, egestas et mi semper, interdum gravida dolor. In vitae scelerisque orci, sed interdum...

CSS

ul.tabs{
    margin: 0;
    padding: 0;
    list-style: none;
    height: 30px;
    width: 100%;
}
ul.tabs_child{
	margin:0;
	padding:0;
	list-style: none;
	height: 30px;
	width: 298px;
	position: relative;
	top:30px;
	left:623px;
}
ul.tabs li {
    float: left;
    margin: 0 16px 0 0; 
    padding: 0;
    height: 30px; 
    line-height: 30px; 
    overflow: hidden;
    position: relative;
    background: #eee;
    border-radius:7px 7px 0 0;
    -moz-border-radius:7px 7px 0 0;
    -webkit-border-radius:7px 7px 0 0;
}
ul.tabs_child li{
	width: auto;
	height: 30px; 
	line-height: 30px; 
	overflow: hidden;
	position: relative;
	background: #eee;
}
ul.tabs li a, ul.tabs_child li a {
    text-decoration: none;
    color: #4a4a4a;
    display: block;
    font-size: 14px;
    padding: 0 12px;
    outline: none;
    text-transform:uppercase;
}
ul.tabs li a:hover, ul.tabs li.active a, ul.tabs_child li.active a, ul.tabs_child li a:hover
{
    color: #fff!important;
}

ul.tabs li.active,  ul.tabs_child li.active
{
background: #000;
}
 ul.tabs li:hover, ul.tabs_child li:hover 
{
background: #a1a1a1;
}

.tab_container, .tab_container_child
 {
    border:1px solid #1a1a1a;
    background:#eee;

}
.tab_container_child{
	width:621px;
}
.tab_content, .tab_content_child
 {
	padding:17px;
	color:#4a4a4a;
	font-size: 12px;
}

JavaScript

$(document).ready(function() {
    
    //When page loads...
    $(".tab_content, .tab_content_child").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $("ul.tabs_child li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    $(".tab_content_child:first").show(); //Show first tab content

	
  
    //On Click Event
    $("ul.tabs li").click(function() {
    
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
        $(this).addClass("active"); //Add "active" class to selected tab
        $(".tab_content").hide(); //Hide all tab content
    
        var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
        $(activeTab).fadeIn(); //Fade in the active ID content
        return false;
    });    
    //On Click child tabs Event
$("ul.tabs_child li").click(function() { 
$("ul.tabs_child li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content_child").hide(); //Hide all tab content 
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content 
return false;
});
});