JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  
 </div>
 <div id=footer>
  <button id="left">&laquo;</button>
   <button id="right">&raquo;</button>
   <div class="box">
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
     <div class="block"></div>
   </div>
 </div>

CSS

body, html {
  height: 100vh;
  margin: 0px;
  padding: 0px;
}

#wrapper {
  height: -webkit-calc(100% - 180px); //100px -> the same as the height of the footer
  scroll: auto;
}

#footer {
  height: 180px;
}
.box{
    width: 600px;
    background-color: #000;
    overflow:hidden;
    white-space: nowrap;
}
.block {
    display:inline-block;
    background-color: #abc;
    left: 0;
    width: 90px;
    height: 90px;
    margin-left: 10px;
}

JavaScript

$( "#right" ).click(function() {
        $( '.box' ).animate({
            scrollLeft: '+=' + $('.box').width()
        });
    });
    $( "#left" ).click(function(){
        $( '.box' ).animate({
            scrollLeft: '-=' + $('.box').width()
        });
    });