JSFiddle - React, Tailwind, and code Playground

by oilvier

HTML

<div class="foo"></div>

CSS

/* Works on Firefox */
.foo {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Works on Chrome, Edge, and Safari */
.foo::-webkit-scrollbar {
  width: 12px;
}

.foo::-webkit-scrollbar-track {
  background: orange;
}

.foo::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

body {
  margin: 0;
  padding: 0;
}

.foo {
  height: 1500px;
  overflow-y: scroll;
}