JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
  <button class="scrollButton" id="scrollUp">Scroll up</button>
  <button class="scrollButton" id="scrollDown">Scroll down</button>
  <div id="scroller">
  <div class="content" style="background-color: #aaaaff"></div>
    <div class="content" style="background-color: #aaffaa"></div>
    <div class="content" style="background-color: #ffaaaa"></div>
    <div class="content" style="background-color: #aaaaff"></div>
    <div class="content" style="background-color: #aaffaa"></div>
    <div class="content" style="background-color: #ffaaaa"></div>
    <div class="content" style="background-color: #aaaaff"></div>
    <div class="content" style="background-color: #aaffaa"></div>
    <div class="content" style="background-color: #ffaaaa"></div>
    <div class="content" style="background-color: #aaaaff"></div>
    <div class="content" style="background-color: #aaffaa"></div>
    <div class="content" style="background-color: #ffaaaa"></div>
  </div>
</div>

CSS

html, body {
  padding: 0;
  margin: 0;
}

#wrapper {
  width: 200px;
  position: relative;
  height: 100vh;
}

.content {
  height: 300px;
}

.scrollButton {
  position: absolute;
}

#scrollUp {
  top: 0;
}

#scrollDown {
  bottom: 0;
}

#scroller {
  height: 100%;
  overflow-y: scroll;
}

JavaScript

const scroller = document.getElementById('scroller');
const scrollUp = document.getElementById('scrollUp');
const scrollDown = document.getElementById('scrollDown');

scrollUp.addEventListener('click', () => {
  scroller.scrollBy({
    top: -300,
    behavior: 'smooth',
  });
});

scrollDown.addEventListener('click', () => {
  scroller.scrollBy({
    top: 300,
    behavior: 'smooth',
  });
});