JSFiddle - React, Tailwind, and code Playground

by Alexey Sheremeta

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<ul class="tabs">
  <li class="active"><a href="#tab1">Вкладка 1</a></li>
  <li><a href="#tab2">Вкладка 2</a></li>
  <li><a href="#tab3">Вкладка 3</a></li>
</ul>
<section id="tabs-group-block">
  <div id="tab1">
    <h1>
    Блок №1
    </h1>
    <p>
      Текст блока
    </p>
  </div>
  <div id="tab2">
    <h1>
    Блок №2
    </h1>
    <p>
      Текст блока
    </p>
  </div>
  <div id="tab3">
    <h1>
    Блок №3
    </h1>
    <p>
      Текст блока
    </p>
  </div>
</section>

CSS

ul.tabs {
  background: #fafbfc;
  list-style: none;
  margin: 0;
  padding: 0 10px;
  border-bottom: 1px solid #e7e8ec;
  height: 17px;
  padding: 18px 6px 20px;
  line-height: 17px;
  height: 17px;
  outline: none;
}

ul.tabs li {
  display: inline-block;
}

ul.tabs li a {
  padding: 18px 6px;
  line-height: 17px;
  height: 17px;
  color: #656565;
  text-decoration: none;
  transition: color 0.2s ease;
}

ul.tabs li.active a {
  border-bottom: 2px solid #6285af;
}

ul.tabs li a:hover {
  border-bottom: 2px solid #cad2db;
}

#tabs-group-block {
  background: #fff;
  padding: 20px 15px;
}

h1 {
  margin: 0;
}

JavaScript

$('#tabs-group-block > div').hide();
$('#tabs-group-block > div:first').show();
$('ul.tabs a').on('click', function() {
	 $this = $(this);
	 $this.parent().parent().find('li').removeClass('active');
	 $('#tabs-group-block').children('div').hide();
	 $('#tabs-group-block ' + $this.attr('href')).show();
	 $this.parent().addClass('active');
});