JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box-outer">
  <a class="arrow-left arrow">L</a>
  <a class="arrow-right arrow">R</a>
  <div class="box-inner">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
  </div>
</div>

CSS

.box-outer {
  width: 20rem;
  height: 6rem;
  position: relative;
}

.arrow-left {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  left: 0rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.arrow-right {
  position: absolute;
  width: 2rem;
  height: 2rem;
  top: 1.5rem;
  right: 10rem;
  z-index: 1;
  background-color: yellow;
  border: 1px solid black;
}

.box-inner {
  width: 5rem;
  height: 6rem;
  position: absolute;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
}

.thumb {
  height: 5rem;
  width: 2rem;
  background-color: green;
  border: 1px solid black;
  display: inline-block;
}

JavaScript

$(".arrow").click(function() {
  var box = $(".box-inner"),
    x;
  if ($(this).hasClass("arrow-right")) {
    x = ((box.width() / 2)) + box.scrollLeft();
    box.animate({
      scrollLeft: x,
    })
  } else {
    x = ((box.width() / 2)) - box.scrollLeft();
    box.animate({
      scrollLeft: -x,
    })
  }
})