JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slides-container">
    <ul class="slides">
        <li class="slide">S1</li>
        <li class="slide">S2</li>
        <li class="slide">S3</li>
    </ul>
</div>
<hr>
<button class="goto" rel="0">GOTO S1</button>
<button class="goto" rel="1">GOTO S2</button>
<button class="goto" rel="2">GOTO S3</button>

CSS

.slides-container {
    height: 100px;
    overflow: hidden;
    width: 200px;
}

.slides {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 600px;
    
    -moz-transition: left 1s;
    -webkit-transition: left 1s;
    transition: left 1s;
}

.slide {
    display: block;
    float: left;
    height: 100px;
    width: 200px;
}

.slide:nth-child(1) {background: #ff0080;}
.slide:nth-child(2) {background: #0080ff;}
.slide:nth-child(3) {background: #80ff00;}

JavaScript

$('.goto').click(function (event) {
    $('.slides').css('left', -200 * $(this).attr('rel') + 'px')
})