JSFiddle - React, Tailwind, and code Playground

by dholbert

HTML

<div class="scrollable"></div>
<div class="scrollable pseudo8"></div>
<div class="scrollable pseudo20"></div>

CSS

.scrollable {
  overflow: scroll;
  height: 100px;
  width: 100px;
  border: 2px solid black;
}
.scrollable::before {
  display: block;
  content: "overflowing content";
  height: 300px;
  width: 300px;
}
.pseudo8::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.pseudo8::-webkit-scrollbar-thumb, .pseudo20::-webkit-scrollbar-thumb {
  background: cyan;
}
.pseudo20::-webkit-scrollbar {
  width: 20px;
  height: 20px;
}