JSFiddle - React, Tailwind, and code Playground

by Ayri Rin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class='scroll' id='simple'>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore cumque amet officiis reiciendis nesciunt sint modi eaque quisquam, excepturi dicta esse tempora quis quia, doloremque sit cum praesentium accusantium ex.
</p>
  <div class='inner'></div>
</div>

CSS

html{ background: linear-gradient(left, #99a, #eee, #99a); }
#page{
  margin: 0 auto 0 -40px;
  text-align: center;
  padding: 1em 0;
}
.scroll{
  height: 300px;
  width: 40px;
  overflow-y: scroll;
  display: inline-block;
}
.scroll .inner{
  height: 300%;
  width: 100%;
  content: '.';
}

/*
  Simple
*/
#simple::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
#simple::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
}
#simple::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background: rgba(0,0,0,0.2);
}
#simple::-webkit-scrollbar-thumb:hover{
	background: rgba(0,0,0,0.4);
}
#simple::-webkit-scrollbar-thumb:active{
	background: rgba(0,0,0,.9);
}

/*
  Grey
*/
#grey::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#grey::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background: rgba(0,0,0,0.05);
}
#grey::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(left, #999, #888);
  -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,0.8);
}
#grey::-webkit-scrollbar-thumb:hover{
  background: linear-gradient(left, #888, #777);
}

/*
  White
*/
#white::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#white::-webkit-scrollbar-track {
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
  border: 1px solid #ccc;
}
#white::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: linear-gradient(left, #fff, #e4e4e4);
  border: 1px solid #aaa;
}
#white::-webkit-scrollbar-thumb:hover {
  background: #fff;
}
#white::-webkit-scrollbar-thumb:active{
  background: linear-gradient(left, #22ADD4, #1E98BA);
}

/*
  Square
*/
#square::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
#square::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.1);
  box-shadow: inset 0 0 4px rgba(0,0,0,0.3);
}
#square::-webkit-scrollbar-thumb {
  background: linear-gradient(left, rgba(0,0,0,0.1), rgba(0,0,0,0.15));
  border: 1px solid...