JSFiddle - React, Tailwind, and code Playground

HTML

<button id="goto100">Go to 100</button>
<button id="goto199">Go to 199</button>
<button id="goto200">Go to 200</button>
<button id="goto300">Go to 300</button>
<div id="page">
    <div id="box"></div>
</div>

CSS

#page {
    position: absolute;
    top: 50px; left: 0px;
    width: 400px; height: 400px;
    overflow: hidden;
}

#box {
    position: absolute;
    top: 0px; left: 0px;
    width: 200px; height: 400px;
    background: #ccc; overflow: hidden;
    transform: translateX(200px);
}

JavaScript

$('#goto100').click(function(){
    $('#box').css('transform', 'translateX(100px)')
})

$('#goto199').click(function(){
    $('#box').css('transform', 'translateX(199px)')
})

$('#goto200').click(function(){
    $('#box').css('transform', 'translateX(200px)')
})

$('#goto300').click(function(){
    $('#box').css('transform', 'translateX(300px)')
})