JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scrollbar" id="scroll">
  <div class="scrollbar-active">
    <br>
    <br>a
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>a
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>a
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>a
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>a
  </div>
</div>

CSS

.scrollbar {
   margin-left: 30px;
   float: left;
   height: 300px;
   background: #F5F5F5;
   overflow-y: scroll;
   margin-bottom: 25px;
 }
 
 .scrollbar-active {
   min-height: 450px;
 }
 
 #scroll::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
   background-color: #F5F5F5;
 }
 
 #scroll::-webkit-scrollbar {
   width: 10px;
   background-color: #F5F5F5;
 }
 
 #scroll::-webkit-scrollbar-thumb {
   background-color: #000000;
   border: 2px solid #555555;
 }
 
 body {
   scrollbar-base-color: red;
   scrollbar-3dlight-color: #000;
   scrollbar-highlight-color: blue;
   scrollbar-track-color: green;
   scrollbar-arrow-color: black;
   scrollbar-shadow-color: yellow;
   scrollbar-dark-shadow-color: brown;
 }