JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="content"></div>
</div>

CSS

div#container {
  height: 200px;
  width: 300px;
  overflow: auto;
  margin: 10px;
  border: 1px solid #000
}

div#content {
  height: 201px;
  width: 301px;
}

div#container::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

div#container::-webkit-scrollbar:vertical {
  border-left: 1px dotted #aaa;
}

div#container::-webkit-scrollbar:horizontal {
  border-top: 1px dotted #aaa;
}

div#container::-webkit-scrollbar-thumb {
  border-radius: 0px;
  box-shadow: inset 0px 0px 0px 1px rgba(51, 85, 51, 0.1);
  /* puts a border on the inside of the rail */
  background-clip: padding-box;
  border: 2px solid rgba(0, 0, 0, 0);
  background-color: rgba(108, 110, 113, 0.4);
}

div#container::-webkit-scrollbar-thumb:vertical {
  border-left: 3px solid rgba(0, 0, 0, 0);
}

div#container::-webkit-scrollbar-thumb:horizontal {
  border-top: 3px solid rgba(0, 0, 0, 0);
}

div#container:hover::-webkit-scrollbar-thumb {
  background-color: rgba(108, 110, 113, 0.7);
  box-shadow: inset 0px 0px 0px 1px rgba(51, 85, 51, 0.3);
}

div#container::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

div#container::-webkit-scrollbar-corner {
  background-color: transparent;
  border-left: 1px dotted #aaa;
  border-top: 1px dotted #aaa;
}