JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<div id="textcontainer" dir="rtl"><div id="intextcontainer">test</div>

Bla bla bla
</div>

</div>

CSS

div::-webkit-scrollbar-track-piece{
    background-color: #fbfcfc;
    border: 1px solid #d9dadb;
}
div::-webkit-scrollbar{

    width:8px;
    height:50px;
    color: #c9242d;
}

div::-webkit-scrollbar-thumb{
    background-image: url('../images/scroll.png');
    background-repeat:no-repeat;
}

div::-webkit-scrollbar-track-piece:vertical:start {
margin-top:36px;
}

.right
{
margin-right: 35px;
}

.top
{
margin-top: 7px;
}

#textcontainer
{
width: 500px; 
height: 370px; 
float: right; 
position: relative; 
margin-right: 50px; 
word-wrap: break-word;
overflow-y: scroll;
padding-right: 10px;
overflow-x: hidden;
}

#intextcontainer
{
color: #c9242d; 
font-size: 24px; 
border-bottom: 5px solid #d1d3d4; 
margin-right: 10px;
font-weight: 900;
}