JSFiddle - React, Tailwind, and code Playground

HTML

<div id='main'>
    <div id="introAnime">
        <div class='sliderNav prevNext'>
            <button data-dir='prev' class='left'><span><</span></button>
            <button data-dir='next' class='right'><span>></span></button>
        </div>

    <div class='sliderNav sceneBtns'>
        <button data-dir='1'>1</button>
        <button data-dir='2'>2</button>
        <button data-dir='3'>3</button>
    </div>
        <div class="sliderContent">
            <ul>
              <li class="">1<div class="showScene"></div></li>
              <li class="">2<div class="showScene"></div></li>
              <li class="">3<div class="showScene"></div></li>
            </ul>
        </div>
    </div>
</div>

CSS

#main{
    width: 80%;
    margin: auto;
}
#introAnime{
    width: 100%;
    position: relative;
    height:300px;
    border: 2px solid #ccccccc;
    margin-bottom: 5%;
    margin-top: 2%;
    border-radius: 20px;
      box-shadow:
        1px 1px 0 0 #014D06,
        2px 2px 0 0 #014D06,
        3px 3px 0 0 #014D06,
        4px 4px 0 0 #014D06,
        5px 5px 5px 0 #000000;
}
.showScene{
    height: 200px;
    width: 680px;
}
#introAnime ul li:nth-child(1){
    background-color: #669900;
}
#introAnime ul li:nth-child(2){
    background-color: blue;
}
#introAnime ul li:nth-child(3){
    background-color: orange;
}
.sliderContent{
    overflow: scroll;
    margin: 50px;
    color:#ffffff;
    text-size: 3em;
}

.sliderContent ul {
    width: 10000px;
    height: 100%;
    list-style: none;

}
.sliderContent ul li{
    float:left;
    list-style-type: none;
}
.sliderNav{
    position: absolute;
    display: none;

}
.sliderNav button{
    cursor: pointer;
}
.prevNext {
    top: 255px;
}
.prevNext button{
    width: 40px;
    height: 40px;
    color: #ffffff;
    font-size: 1.5em;

}
.prevNext .left{
    position: absolute;
    border-bottom-left-radius: 20px;
    border-top-right-radius: 20px;
    left: 5px;

}
.prevNext .right{
    position: absolute;
    border-bottom-right-radius: 20px;
    border-top-left-radius: 20px;
    left: 737px;

}
.sceneBtns{
    border: 2px solid #cccccc;
    padding: 5px;
    border-top: 0px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    left: 195px;
}
.sceneBtns button{
    background-color: #ffffff;
    border: none;
    font-size: 10pt;
    color: #669900;
    padding-left: 10px;
    padding-right: 10px;
}
.sceneBtns button:nth-child(1){
    border-right: 2px solid #669900;

}
.sceneBtns button:nth-child(2){
    border-right: 2px solid #669900;
    
}

JavaScript

$(window).resize(function() {

  grabVars();
  $('.showScene').css({
    'width' : contWidth + 'px'
  });
  naviSetup();
  resizeMargin();

});

$(document).ready(function(){
    activeSlide = 1;
    grabVars();
    naviSetup();
    animeSetup();

    $('.sliderNav').find('button').on('click', function(){
        moveTo = $(this).data('dir');
        move(moveTo);
    });
    
});

function grabVars(){
    introAnimeWidth = $('#introAnime').width();
    contWidth = $('.sliderContent').width();
    numScenes = $('.showScene').length;
    sceneMarginLeft = $('.sliderContent ul')
        .css('margin-left').replace('px','');
}

function naviSetup(){
    $('.sliderNav').show();
    $('.prevNext .right').css({
        'left' : ((introAnimeWidth - 43) + 'px')
    });
    sceneBtnsLeft = (introAnimeWidth - $('.sceneBtns').width())/2;
    $('.sceneBtns').css({
        'left' : sceneBtnsLeft
    });
}

function animeSetup(){
    $('.sliderContent').css({
        'overflow' : 'hidden'
    });
    $('.showScene').css({
        'width' : contWidth + 'px'
    });
}
function move(moveTo){
    grabVars();
    if (moveTo == 'next')
    {
        if ( sceneMarginLeft <= (-1) * ((1*numScenes) - 1) * (contWidth*1) )
        {
            moveValue = 0;
            activeSlide = 1;
        }
        else
        {
            moveValue = sceneMarginLeft - contWidth;
            activeSlide += 1;
        }
    }
    else if (moveTo == 'prev')
    {
        if ( sceneMarginLeft >= 0 )
        {
            moveValue = (-1) * ((1*numScenes) - 1) * (contWidth*1);
            activeSlide = 3;
        }
        else
        {
            moveValue = (1*contWidth) + (1*sceneMarginLeft);
            activeSlide -=1;
        }
    }
    else
    {
        moveValue = -((moveTo-1) * contWidth);
        activeSlide = moveTo;
    }

    $('.sliderContent ul').animate({
        'margin-left' : moveValue + 'px'
    }, 'slow');
}
function resizeMargin(){
    $('.sliderContent ul').css({
       ...