JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://demos.flesler.com/jquery/scrollTo/js/jquery.scrollTo-min.js"></script>
<div class="mainwrapper">
<div class="pane">
    <div class="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    </div>
</div>
</div>

CSS

body, html {margin:0px; display:block; overflow-x:hidden;}
body {background:#999999;}

.pane {margin-top:30px; width:100%; position:relative; height:225px; overflow:auto;}
.item {width:100px; height:200px; margin-left:10px; float:left; background:white; position:relative;}
.wrapper { width: 1200px; height: 200px; }
.mainwrapper { height: 200px; overflow: hidden; width: 100%; }

JavaScript

$("body").keydown(function(e) {
  if(e.keyCode == 37) { // left
    $('.pane').scrollTo( {top:'=0px', left:'-=100'}, 1200 );
  }
  else if(e.keyCode == 39) { // right
   $('.pane').scrollTo( {top:'=0px', left:'+=100'}, 1200 );
  }
});