JSFiddle - React, Tailwind, and code Playground

by WILLIAM CORREA

HTML

<div>
     1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    <br><br><br><br><br><br>
<br><br><br><br><br><br>
    <br><br><br><br><br><br>
        <br><br><br><br><br><br>
            <br><br><br><br><br><br>
                <br><br><br><br><br><br>
                <br><br><br><br><br><br>
            <br><br><br><br><br><br>
</div>

CSS

div {
    width: 300px;
    height: 300px;
    overflow: auto;
}
*{
  scrollbar-base-color: white;
  scrollbar-track-color: white;
  scrollbar-darkshadow-color: white;
  scrollbar-3dlight-color: white;
  scrollbar-arrow-color: #757778;
  scrollbar-shadow-color: #bec1c4;
  scrollbar-highlight-color:#bec1c4;
}

::-webkit-scrollbar {
  background-color: #eee;
  width: 11px;
  height: 11px;
}

::-webkit-scrollbar-track-piece {
  background-color: white;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment, ::-webkit-scrollbar-thumb {
  background-color: white;
  border: solid 1px #bec1c4;
}

::-webkit-scrollbar-track-piece {
  background-color: #fff;
}
::-webkit-scrollbar-track-piece:vertical {
  background-image: linear-gradient(to right, rgba(0,0,0,.1) 1px, transparent 1px);
  background-size: 11px 11px;
  background-position: 5px 0;
}
::-webkit-scrollbar-track-piece:horizontal {
  background-image: linear-gradient(0deg, rgba(0,0,0,.1) 1px, transparent 1px);
  background-size: 11px 11px;
  background-position: 0 6px;
}

::-webkit-scrollbar-button:vertical:start:decrement{
  background-image: url('data:image/gif;base64,R0lGODlhDwAPAIABAHV3eP///yH5BAEKAAEALAAAAAAPAA8AAAITjI+py+0PEYigvoob3rH7D4ZBAQA7');
  background-position: center;
}
::-webkit-scrollbar-button:vertical:end:increment{
  background-image: url('data:image/gif;base64,R0lGODlhDwAPAIABAHV3eP///yH5BAEKAAEALAAAAAAPAA8AAAITjI+py+0P4wG0gmavq1HLD4ZiAQA7');
  background-position: center;
}
::-webkit-scrollbar-button:horizontal:start:decrement{
  background-image: url('data:image/gif;base64,R0lGODlhDwAPAIABAHV3eP///yH5BAEKAAEALAAAAAAPAA8AAAIVjI+py+1vAAxAvmobzrpO/03iSDIFADs=');
  background-position: center;
}
::-webkit-scrollbar-button:horizontal:end:increment{
  background-image: url('data:image/gif;base64,R0lGODlhDwAPAIABAHV3eP///yH5BAEKAAEALAAAAAAPAA8AAAIVjI+py+0P3gFR0uouZtfu9kniSDYFADs=');
  background-position: center;
}