JSFiddle - React, Tailwind, and code Playground

HTML

Scroll Bar Style Changing.
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

CSS

::-webkit-scrollbar {
 width: 7px;
}
::-webkit-scrollbar-track {
 -webkit-box-shadow: inset 0 0 6px #AFAFAF;
 -webkit-border-radius: 25px;
 background:#AFAFAF;
 border-radius: 25px;
}
::-webkit-scrollbar-thumb {
 -webkit-border-radius: 25px;
 border-radius: 25px;
 background: #CD3131;
 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:hover {
 background: rgba(255,0,0,0.4);
}
::-webkit-scrollbar-thumb:window-inactive {
 background: rgba(255,0,0,0.4);
}

  

html, body{ scrollbar-face-color: #AFAFAF; scrollbar-arrow-color: #AFAFAF; scrollbar-track-color: #AFAFAF; scrollbar-shadow-color: #AFAFAF; scrollbar-highlight-color: #AFAFAF; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-Color: #202020; }

  body{
    scrollbar-base-color: #CD3131;
    scrollbar-base-color: #CD3131;
    scrollbar-3dlight-color: #CD3131;
    scrollbar-highlight-color: #CD3131;
    scrollbar-track-color: #AFAFAF;
    scrollbar-arrow-color: #CD3131;
    scrollbar-shadow-color: #CD3131;
    scrollbar-dark-shadow-color: #CD3131;
    }