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;}

JavaScript

$(function() {
    // Выбор вариантов
    $('select[name=variant]').change(function() {
        price = $(this).find('option:selected').attr('price');
        compare_price = '';
        if (typeof $(this).find('option:selected').attr('compare_price') == 'string') compare_price = $(this).find('option:selected').attr('compare_price');
        $(this).find('option:selected').attr('compare_price');
        $(this).closest('form').find('span').html(price);
        $(this).closest('form').find('strike').html(compare_price);
        return false;
    });
});

$(document).ready(function() {

    $(".tab_content").hide();
    $("ul.tabs li:first").addClass("active").show();
    $(".tab_content:first").show();

    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active");
        $(this).addClass("active");
        $(".tab_content").hide();
        var activeTab = $(this).find("a").attr("href");
        $(activeTab).fadeIn();
        return false;
    });

});