JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://areaaperta.com/nicescroll/js/jquery.min.js"></script>
<script src="http://areaaperta.com/nicescroll/js/jquery.nicescroll.min.js"></script>
<div class="wrapper">
<article class="container" >
 <img src="http://placehold.it/300X250" />
</article>

<!-- Time line to be scroller horizontally -->    
<article class="container" >
    <h3>Timeline</h3>
  <div id="scroll-div">
    <section id="tl-scroll" class="tl-scroll">
      <object>
          <img src="http://placehold.it/1000X200/165ca0/EEE" />
      </object>
    </section>
  </div>
</article>

<!--  -->
<article class="container" >
  <img src="http://placehold.it/300X250" />
</article>
</div>

CSS

.wrapper { width:100%; overflow: hidden }
.container { width: 90%; margin: 0 auto }
#scroll-div .tl-scroll { overflow-x: scroll; display: block; }
h3 { text-align: center }

JavaScript

$(document).ready(
  function() { 
    $("html").niceScroll();
  }    
}       

document.getElementById('tl-scroll').addEventListener('mousewheel', function(e) {
  this.scrollLeft -= (e.wheelDelta);
  e.preventDefault();    
}, false);
$('#tl-scroll').getNiceScroll().hide();