JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div id="viewport">
        <div id="side_scroller">
            <div id="left">
                <h1>left</h1>
            </div>
            <div id="mid_left">
                <a href="#"><h1>mid_left</h1></a>
            </div>
            <div id="mid_right">
                <a href="#"><h1>mid_right</h1></a>
            </div>
            <div id="right">
                <h1>right</h1>
            </div>
        </div>
    </div>
</div>

CSS

* {
    padding: 0 0 0 0;
    margin: 0 0 0 0;
}
body {
    background: #2a2a2a;
}

#wrapper { /* used to center the page content, while allowing the viewport to have absolute positioning relative to this div */
    position: relative;
    margin: 20px auto;
    width: 1204px;
    height: 304px;
    /* border: 1px solid red; */
}
#viewport {
    width: 400px;
    height: 300px;
    background: transparent;
    position: absolute;
    border: 2px solid #fff;
    z-index: 1;
    left: 400px;
    /* overflow: hidden; */
}

#side_scroller {
    position: absolute;
    left: -402px;
    
background: lightblue;
    width: 1204px; /* add 4px to compensate for viewport border */
    height: 300px;    
}

#left,#mid_left,#mid_right,#right {
    float: left;
    height: 300px;
    /* border: 1px dotted green; */
}

#left {
    width: 395px;
    padding: 0 0 0 5px;
    /* border-left: 1px dotted green; */
    /* border-right: 1px dotted green; */
}
#mid_left {
    width: 190px;
    padding: 0 5px 0 5px;
    /* border-left: 1px dotted green; */
    /* border-right: 1px dotted green; */
    text-align: right;
}
#mid_right {
    width: 190px;
    padding: 0 5px 0 5px;
    /* border-left: 1px dotted green; */
    /* border-right: 1px dotted green; */
}
#right{
    width: 395px;
    padding: 0 5px 0 0px;
    /* border-left: 1px dotted green; */
    /* border-right: 1px dotted green; */
    text-align: right;
}

JavaScript

$(document).ready(function() {
    var $viewport = $("#viewport");
    var slideAmount = $viewport.width() / 2;
    var viewportLeft = $viewport.offset().left;
    var viewportRight = $viewport.offset().left + $viewport.width();
    var $slider = $("#side_scroller");
    
    $('#mid_left a').click(function(event) 
    {
        event.preventDefault();
        collisionLoop = setInterval(collide, 1);
        $slider.animate({left: $(window).width()});
    });
    
    $('#mid_right a').click(function(event) 
    {
        event.preventDefault(); 
        collisionLoop = setInterval(collide, 1);
            $slider.animate({left: -800});
    });
    
    function collide()
    {
                     if($("#mid_left").offset().left + $("#mid_left").width() > viewportRight)
             {
                 $slider.stop();
                 var correction = $slider.position().left -(($("#mid_left").offset().left +$("#mid_left").width()) - viewportRight);
                 $slider.css({left:correction});
clearInterval(collisionLoop);
             }
        else if($("#mid_right").offset().left < viewportLeft)
        {
            $slider.stop();
             var correction = $slider.position().left +(viewportLeft - ($("#mid_right").offset().left));
                 $slider.css({left:correction});
            clearInterval(collisionLoop);
        }
    }
});