JSFiddle - React, Tailwind, and code Playground

by rus333

HTML

<ul class="tabs_catalog_top_new">
    <li>Лидеры продаж</li>
    <li>Новинки</li>
</ul>

CSS

.tabs_catalog_top_new li {
    float: left;
    padding: 3px 5px;
}
.tabs_catalog_top_new, .tabs_catalog_top_new li {
    overflow: hidden;
    border: 1px solid;
}

.box_catalog_top_new {
    border: red 1px solid;
    padding: 5px;
}
.box_catalog_top_new div {
    background: pink;
    padding: 5px;
    position: absolute;
    left: -9999px;
    opacity: 0;
    filter: alpha(opacity=0);
}
.box_catalog_top_new div.visible {
    position: static;
}

JavaScript

$('li').each(function(i) {
  var _this = $(this);
  
  _this.click(function(e) {
    $('div', '.box_catalog_top_new')
    .removeClass('visible')
    .css({
      opacity: 0    
    })
    .eq(i)
    .addClass('visible')
    .animate({
      opacity: 1    
    });
  });
});