JSFiddle - React, Tailwind, and code Playground

by Ju Oliveira

HTML

<div class="outer">
  <p>Say</p>
  <div class="inner">
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
    <p>Something</p>
   ...

CSS

body {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

.outer {
  position: absolute;
  overflow: hidden;
  height: 70%;
  width: 50%;
  background: aquamarine;
}
.inner {
  overflow-y: scroll;
  height: 100%;
  background: lightblue;
}

.inner::-webkit-scrollbar
{
    //width: 10px;
    background-color: red;
}

.inner::-webkit-scrollbar-track
{
    //background-color: red;
    //height: 100%;
}

.inner::-webkit-scrollbar-thumb
{
    background-color: blue;
    //height: 10%;
}
.inner::-webkit-scrollbar-track-piece
{
    //background-color: green;
    //height: 95%;
}