JSFiddle - React, Tailwind, and code Playground

by Slava

HTML

<div class="parent">
  <div class="child" style="width:200px;height:400px;">
  </div>
</div>

<div class="parent">
  <div class="child" style="width:400px;height:200px;">
  </div>
</div>

<div class="parent">
  <div class="child" style="width:400px;height:400px;">
  </div>
</div>

<div class="parent">
  <div class="child" style="width:1400px;height:1400px;">
  </div>
</div>

CSS

.parent{
  width:250px;
  height:250px;
  overflow:auto;
  display:inline-block;
  margin:10px;
  background:rgba(0,0,0,0.1);
}
::-webkit-scrollbar{
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar:hover{
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track{
  border-radius: 10px;
  background: rgba(0,30,80,0.02);
  box-shadow: 0 0 2px 0 rgba(0,30,80,0.05) inset;
}
::-webkit-scrollbar-thumb{
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.2);
}
::-webkit-scrollbar-thumb:active {
  background: rgba(0,0,0,0.3);
}