JSFiddle - React, Tailwind, and code Playground

by jorgeluis

HTML

<div class="constrainedbox">
Lorem ipsum dolor sit amet, per aliquam corpora vivendum at, et nulla torquatos per. Feugiat petentium cu duo. Nam id tantas nostrud civibus, ut ius persius sensibus similique. Usu ne labitur pericula, eos alii summo in.

Cu duo principes conceptam definitiones, mutat temporibus te pro. Has wisi malorum et. Sea id salutandi mnesarchum. Maiestatis eloquentiam per ea, his quando viderer et, vix ut mundi legimus praesent. Ut vis quod fugit neglegentur. Cu graeco evertitur per.
</div>

SCSS

body {
  padding: 40px;
  background-color: #ddd;
}
div {
  max-width: 200px;
  max-height: 200px;
  overflow: scroll;
}

// basic properties
::-webkit-scrollbar {
    width: 12px;
}
 
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-corner {
    background-color: transparent;  
}


// other properties
::-webkit-scrollbar-button       { /* 2 */ }
::-webkit-scrollbar-track-piece  { /* 4 */ }
::-webkit-resizer                { /* 7 */ }