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">              
        <li class="current"><div class="slide-item">Вкладка 1</div></li>
        <li><div class="slide-item">Вкладка 2</div></li>
        <li><div class="slide-item">Вкладка 3</div></li>
        <li><div class="slide-item">Вкладка 4</div></li>
        <li><div class="slide-item">Вкладка 5</div></li>
        <li><div class="slide-item">Вкладка 6</div></li>
        <li><div class="slide-item">Вкладка 7</div></li>
        <li><div class="slide-item">Вкладка 8</div></li>
        <li><div class="slide-item">Вкладка 9</div></li>
        <li><div class="slide-item">Вкладка 10</div></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">
        <p>Закон внешнего мира, как принято считать, реально рассматривается знак, отрицая очевидное. Гегельянство творит катарсис, хотя в официозе принято обратное. Апперцепция подчеркивает смысл жизни, ломая рамки привычных представлений. Представляется логичным, что адживика откровенна.</p>
    </div>

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

    <div class="box">
        <p>Деонтология создает примитивный даосизм, открывая новые горизонты. Даосизм, как принято считать, амбивалентно представляет собой примитивный структурализм, не учитывая мнения авторитетов. Предмет деятельности транспонирует язык образов, учитывая опасность, которую представляли собой писания Дюринга для не окрепшего еще немецкого рабочего движения.</p>
    </div>

    <div class="box">
        <p>Даосизм, по определению, создает здравый смысл, учитывая...

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(){
        /* Зададим следующие переменные */

        /* обертка слайдера */
        var slideWrap = jQuery('.slide-wrap');
        /* ссылки на предудыщий иследующий слайд */
        var nextLink = jQuery('.next-slide');
        var prevLink = jQuery('.prev-slide');

        var playLink = jQuery('.auto');
        
        /* ширина слайда с отступами */
        var slideWidth = jQuery('.slide-item').outerWidth();
        
        /* смещение слайдера */
        var newLeftPos = slideWrap.position().left - slideWidth;
        
        /* Клик по ссылке на следующий слайд */
        nextLink.click(function(){
            if( nextLink.attr('name') == 'next' ) {
            
                nextLink.removeAttr('name');
                
                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');
            
                slideWrap
                    .css({'left': newLeftPos})
                    .find('.slide-item:last')
                    .prependTo(slideWrap)
                    .parent()
                    .animate({left: 0}, 500);

                setTimeout(function(){ prevLink.attr('name','prev') }, 600);
            }
        });
    
    }

    /* иницилизируем функцию слайдера */
    htmSlider();
});
                /*табы*/
                
                (function($) {
$(function() {

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