JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

	<ul class="tabs">
<li><a href="#tab1"><h2 title='Показать'>Хиты продаж и лучшее</h2></a></li>
<li><a href="#tab2"><h2 title='Показать'>Новинки каталога</h2></a></li>
<li><a href="#tab3"><h2 title='Показать'>Акция, Скидки</h2></a></li>
	</ul>

<div class="tab_container">

	
		<div id="tab1" class="tab_content">
			<ul class="tiny_products main">

			<li class="product">1</li>
			
			</ul>
		</div>
	

	
		<div id="tab2" class="tab_content">
			<ul class="tiny_products main">
			
			<li class="product"><div class="label label_new"></div>2</li>
			
			</ul>
		</div>
	

		<div id="tab3" class="tab_content">
			<ul class="tiny_products main">
			
			<li class="product">3</li>
			
			</ul>
		</div>

</div></div>

CSS

.container 						{clear:both;margin:20px 0;}
.tab_container					{z-index:5;position:relative;clear:both;padding:0 10px;border:1px solid #D9D9D9;border-radius: 0 0 8px 8px;background:#fff;}
.tab_container .product			{border:none;box-shadow:none!important;padding:20px 0;}
ul.tabs li a 						{text-decoration:none;}
ul.tabs li 						{position:relative;z-index:0;display:inline-block;border:1px solid #D9D9D9;margin-right:5px;padding:10px 30px 8px;background:#F0F0F0;margin-bottom:-2px;border-radius:0 6px 0 0;}
ul.tabs li h2						{margin:0;color:#BABABA;text-transform:uppercase;font-size:16px;}
ul.tabs li h2:hover				{color:#868686;}
ul.tabs li.active 					{border-bottom:none;z-index:99;background:#fff;}
ul.tabs li.active a h2, ul.tabs li:hover a h1{color:#3463B3;}