JSFiddle - React, Tailwind, and code Playground

by rus333

HTML

<ul class="tabs_catalog_top_new">
    <li>Лидеры продаж</li>
    <li>Новинки</li>
</ul>
<div class="box_catalog_top_new">
<div>
<h5>Лидеры продаж</h5>
<div class="catalog_top" style="visibility: visible; overflow: hidden; position: relative; z-index: 2; left: 0px; width: 0px;">
<div class="catalog_top_prev"></div>
<ul style="margin: 0pt; padding: 0pt; position: relative; list-style-type: none; z-index: 1; width: 0px; left: 0px;">
                                                    <li style="overflow: hidden; float: left; width: 0px; height: 0px;">
                    <div class="item_image">
                        <p class="item_title">
                            <a href="/catalog/prod/57/3415/">Сервер Express System x3100 M4 (2582K4G)</a>
                        </p>
                        <a href="/catalog/prod/57/3415/">
                            <img width="100" height="100" border="0" id="catalog_list_image_3415" title="Сервер Express System x3100 M4 (2582K4G)" alt="Сервер Express System x3100 M4 (2582K4G)" src="http://рестр.рф/upload/resize_cache/iblock/b1b/100_100_10240811ca8906714d1a9f41f2f5b358d/b1b29e787671e43c73080a290f7cd737.jpg" itemprop="image">
                        </a>
                    </div>
                                <div class="item_info bottom_info">
                        <p class="item_desc">
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   ...

CSS

/* Tabs */
.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;
}

/* Carusel */

.catalog_top, .catalog_new {
    margin: 0 auto;
}
.catalog_top ul li, .catalog_new ul li {

}
.catalog_top_next, .catalog_new_next {
    background: url(http://рестр.рф/bitrix/templates/store_minimal_gray/images/next.png) right center no-repeat;
    width: 30px;
    height: 200px;
    vertical-align: middle;
    position: absolute;
    right: 0;
    top: 40px;
    z-index: 100;
    cursor: pointer;
    display: block;
}
.catalog_top_next:hover, .catalog_new_next:hover {
    background: url(http://рестр.рф/bitrix/templates/store_minimal_gray/images/next_hover.png) right center no-repeat;
}
.catalog_top_prev, .catalog_new_prev {
    background: url(http://рестр.рф/bitrix/templates/store_minimal_gray/images/prev.png) left center no-repeat;
    width: 30px;
    height: 200px;
    vertical-align: middle;
    position: absolute;
    left: 0;
    top: 40px;
    z-index: 100;
    cursor: pointer;
    display: block;
}
.catalog_top_prev:hover, .catalog_new_prev:hover {
    background: url(http://рестр.рф/bitrix/templates/store_minimal_gray/images/prev_hover.png) left center no-repeat;
}
.item_image {
    width: 180px;
    height: 100px
    float: left;
    clear: both;
    margin: 0 30px;
    text-align: center;
}
.item_image a {
    margin: 0 auto;
}
.item_title {
    margin: 0;
    padding: 0;
}
.item_title a {
    color: #6A686B;
    font: normal 12px Verdana;
    text-decoration: none;
}
.item_title a:hover {
    color:#EA0000;
    font: normal 12px Verdana;
    text-decoration:...

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