JSFiddle - React, Tailwind, and code Playground

HTML

ABCDEFGHIJKLMNOPQRSVUTWXYZabcdefghijklmnopqrsvutwxyzABCDEFGHIJKLMNOPQRSVUTWXYZabcdefghijklmnopqrsvutwxyz<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><br><br><br><br><br><br><br><br>

CSS

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-button {
    background-size: 100%;
    height: 10px;
    width: 10px;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-button:end {
    display: block;
}

::-webkit-scrollbar-button:start {
    display: none;
}

::-webkit-scrollbar-button:horizontal:increment {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon2.png);
}

::-webkit-scrollbar-button:horizontal:decrement {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon4.png);
}

::-webkit-scrollbar-button:vertical:increment {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon3.png);
}

::-webkit-scrollbar-button:vertical:decrement {
    background-image: url(https://dl.dropboxusercontent.com/u/55165267/icon.png);
}

::-webkit-scrollbar-track {
    background: #f8f8f8;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb {
    background: #aaa;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.2);
	border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: #989898;
}
::-webkit-scrollbar-thumb:active {
    background: #808080;
    -webkit-box-shadow: inset 1px 1px 2px rgba(0,0,0,0.3);
}