JSFiddle - React, Tailwind, and code Playground

HTML

<div class="section"><!-- section -->
        
    <ul class="tabs"><!-- tabs -->
    
    <div class="slider">
        <div class="slide-list">
            <div class="slide-wrap ts1">   <!-- + класс ts1 для функции -->            
        <li class="current slide-item">Вкладка 1</li>
        <li class="slide-item">Вкладка 2</li>
        <li class="slide-item">Вкладка 3</li>
        <li class="slide-item">Вкладка 4</li>
        <li class="slide-item">Вкладка 5</li>
        <li class="slide-item">Вкладка 6</li>
        <li class="slide-item">Вкладка 7</li>
        <li class="slide-item">Вкладка 8</li>
        <li class="slide-item">Вкладка 9</li>
        <li class="slide-item">Вкладка 10</li>        
            </div>
            <div class="clear"></div>
        </div>
        <div name="prev" class="navy prev-slide"></div>
        <div name="next" class="navy next-slide"></div>
    </div>     
    
    </ul><!-- tabs -->

    
    <div class="box visible">
        Содержимое первой вкладки
    </div>

    <div class="box">
        Все что во второй вкладке
    </div>

    <div class="box">
        То что должно быть в третей
    </div>

    <div class="box">
        Наполнение четвертой
    </div>

    <div class="box">
        Вся внутренность пятого
    </div>

    <div class="box">
        Содержимое шестой вкладки
    </div>

    <div class="box">
        Нужное седьмой вклдаки
    </div>
    
    <div class="box">
        Здесь содержимое Восьмой вкладки
    </div>

    <div class="box">
        Здесь содержимое Девятой вкладки 9
    </div>

    <div class="box">
        Здесь содержимое Десятой вкладки 10
    </div>        
    
</div><!-- section -->

<br /><br />

<div class="section"><!-- section -->
        
    <ul class="tabs"><!-- tabs -->
    
    <div class="slider">
        <div class="slide-list">
            <div class="slide-wrap ts2">  <!-- + класс ts2 для функций -->            
        <li class="current slide-item">vkladka 1</li>
       ...

CSS

/* Задаем сброс обтекания */
.clear {
    margin-top: -1px;
    height: 1px;
    clear:both;
    zoom: 1;
}        
/* Slider */
.slider {
    /* Ширина контейнера */
    width: 700px;
    /* Внешние тступы сверху и снизу */
    margin: 0px auto;
    /* Внутренние отступы для ссылок navy */
    padding: 0 30px;
    /* Позиционирование */
    position: relative;
    /* Скроем то что выходит за границы */
    overflow: hidden;
}
/* Двойной клик по ссылкам вперед/назад вызывает выделение всех элементов слайдера,
поэтому предотвращаем это */
.slider::-moz-selection { background: transparent; color: #fff; text-shadow: none; }
.slider::selection { background: transparent; color: #fff; text-shadow: none; }

.slide-list {
    position: relative;
    margin: 0;
    padding: 0;
}
.slide-wrap {
    position: relative;
    left: 0px;
    top: 0;
    /* максимально возможная ширина обертки слайдера */
    width: 10000000px;
}
.slide-item {
    /* Ширина слайда */
    width: auto;
    /* Внутренние отступы */
    padding: 1px;
    /* Обтекание */
    float: left;
}
.slide-title {
    /* Шрифт */
    font: bold 16px monospace;
    /* Указываем, что элемент блочный */
    display: block;
}

/* навигация вперед/назад */
.navy {
    /* абсолютное позиционирование */
    position: absolute;
    top: 0;
    z-index: 1;
    height: 100%;
    /* ширина ссылок */
    width: 30px;
    cursor: pointer;
}
.prev-slide {
    left: 0;
    background: #dbdbdb url(bg/left-arrow.png) 11px 40% no-repeat;
}
.next-slide {
    right: 0;
    background: #dbdbdb url(bg/right-arrow.png) 13px 40% no-repeat;
}
.navy.disable {
    background: #dbdbdb;
}
/*табы*/

.section {
    width: auto;
    background: #EFEFEF;
    margin: 0 0 30px;
}
ul.tabs {
    height: 28px;
    line-height: 25px;
    list-style: none;
    border-bottom: 0px solid #DDD; /*1px*/
    background: #EFEFEF;
}
.tabs li {
    float: left;
    display: inline;
    margin: 0 1px -1px 0;
    padding: 0 13px 1px;
    color: #777;
   ...

JavaScript

jQuery(document).ready(function(){
function htmSlider(cl){
/* Зададим следующие переменные */
/* обертка слайдера */
var slideWrap = jQuery(cl);
/* ссылки на предудыщий иследующий слайд */
var nextLink = slideWrap.parents('div.section').find('.next-slide');
var prevLink = slideWrap.parents('div.section').find('.prev-slide');
var p = 0;
var playLink = jQuery('.auto');

/* ширина слайда с отступами */
var slideWidth = slideWrap.parents('div.section').find('.slide-item').outerWidth();

/* смещение слайдера */
var newLeftPos = slideWrap.position().left - slideWidth;

/* Клик по ссылке на следующий слайд */
nextLink.click(function(){
if( nextLink.attr('name') == 'next' ) {

nextLink.removeAttr('name');

p++;

slideWrap.animate({left: newLeftPos}, 500, function(){
         slideWrap
         .find('.slide-item:first')
         .appendTo(slideWrap)
         .parent()
         .css({'left': 0});
});

setTimeout(function(){ nextLink.attr('name','next') }, 600);
}
});
/* Клик по ссылке на предыдующий слайд */
prevLink.click(function(){
if( prevLink.attr('name') == 'prev' ) {

prevLink.removeAttr('name');

p--;

slideWrap
         .css({'left': newLeftPos})
         .find('.slide-item:last')
         .prependTo(slideWrap)
         .parent()
         .animate({left: 0}, 500);
setTimeout(function(){ prevLink.attr('name','prev') }, 600);
}
});

slideWrap.delegate('ul.tabs li:not(.current)', 'click', function() {

var eq = $(this).index()+p;
var mel = slideWrap.find('.slide-item:last').index()+1;
if ( eq>=mel || eq<=-mel ) {
eq = eq % mel;
}

$(this).addClass('current').siblings().removeClass('current')
.parents('div.section').find('div.box').hide().eq(eq).fadeIn(150);
})
}

/* иницилизируем функции */
htmSlider('.ts1');  //для первого слайдера
htmSlider('.ts2');  //для второго слайдера
});