JSFiddle - React, Tailwind, and code Playground

by Vladlen Mizenykh

HTML

<nav>
    <span data-tab="1">Новости</span>
    <span data-tab="2">Начать играть</span>
    <span data-tab="3">Скачать лаунчер</span>
</nav>
<div class="tabs">
     <div data-tabs="1" class="active">
         Новости...
     </div>
     <div data-tabs="2">
         Зарегаться и т.д.
     </div>
     <div data-tabs="3">
          win | linux
     </div>
</div>

CSS

nav {
    margin-bottom: 10px;
}
nav span {
    cursor: pointer;
    background: #307ab1;
    padding: 3px 7px;
    display: inline-block;
    margin-left: 5px;
    color: #fff;
}
.tabs {
    padding: 10px;
    background: #eee;
}
.tabs div {
    display: none;
}
.tabs .active {
    display: block;
}

JavaScript

$(function(){
	$(document).on('click','[data-tab]',function(e){
		e.preventDefault();
		var data = $(this).attr('data-tab');
		$('.tabs').children('div').removeClass('active');
		$('[data-tabs='+data+']').addClass('active');
	});
});