JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div class="scrollbar" id="ex3">
    <div class="content">Example 3</div>
</div>

CSS

.scrollbar{
width:150px;
height:300px;
background-color:lightgray;
margin-top:40px;
margin-left:40px;
overflow-y:scroll;
float:left;
}

.content{
height:450px;
}

#ex3::-webkit-scrollbar{
width:8px;
} 

#ex3::-webkit-scrollbar-thumb{
background-color:#B03C3F;
border-radius:10px;
}

#ex3::-webkit-scrollbar-thumb:hover{
background-color:#BF4649;
border:1px solid #333333;
}

#ex3::-webkit-scrollbar-thumb:active{
background-color:#A6393D;
border:1px solid #333333;
} 

#ex3::-webkit-scrollbar-track{
border:1px lightgray solid;
border-radius:10px;
-webkit-box-shadow:0 0 6px lightgray inset;
}

#ex3::-webkit-scrollbar-track:hover{
border:0px gray solid;
border-radius:10px;
-webkit-box-shadow:0 0 6px gray inset;
}