JSFiddle - React, Tailwind, and code Playground

HTML

<div id="controls"><a href="#" id="top">Top</a> <a href="#" id="bottom">Bottom</a> <a href="#" id="left">Left</a> <a href="#" id="right">Right</a></div>
<div id="viewport"><div id="container"><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/1/1c/LA_Lakers_logo.svg/200px-LA_Lakers_logo.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/8/8f/Boston_Celtics.svg/200px-Boston_Celtics.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/1/1c/LA_Lakers_logo.svg/200px-LA_Lakers_logo.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/8/8f/Boston_Celtics.svg/200px-Boston_Celtics.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/1/1c/LA_Lakers_logo.svg/200px-LA_Lakers_logo.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/8/8f/Boston_Celtics.svg/200px-Boston_Celtics.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/1/1c/LA_Lakers_logo.svg/200px-LA_Lakers_logo.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/8/8f/Boston_Celtics.svg/200px-Boston_Celtics.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/1/1c/LA_Lakers_logo.svg/200px-LA_Lakers_logo.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/8/8f/Boston_Celtics.svg/200px-Boston_Celtics.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/1/1c/LA_Lakers_logo.svg/200px-LA_Lakers_logo.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/8/8f/Boston_Celtics.svg/200px-Boston_Celtics.svg.png"/></div><div class="tile"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/1/1c/LA_Lakers_logo.svg/200px-LA_Lakers_logo.svg.png"/></div><div class="tile"><img...

CSS

html { background: #333; }
#viewport {
    width: 360px; height: 360px;
    overflow: hidden;
    margin-top: 50px;
    border: 10px solid blue; border-radius: 20px;
}
#container { width: 600px; height: 600px; line-height: 0; }
.tile {
    display: inline-block; width: 120px; height: 120px; overflow: hidden;
    background: #FFF;
}
.tile:nth-of-type(even) { background: #000; }
.tile img { width: 200px; }

#controls { position: fixed; top: 0; left: 0; }
#controls a { padding: 10px 20px; background: white; }

JavaScript

$(document).ready(function(){
    $("#top").click(function(){
        $("#viewport").animate({scrollTop:0},500);
    });
    $("#bottom").click(function(){
        $("#viewport").animate({scrollTop: 240}, 500);
    });
    $("#left").click(function(){
        $("#viewport").animate({scrollLeft:0},500);
    });
    $("#right").click(function(){
        $("#viewport").animate({scrollLeft: 240}, 500);
    });
});