JSFiddle - React, Tailwind, and code Playground

HTML

<div class="scrollbar">
    <div class="scrollbar-track" style="width: 970px;">
        <div class="scrollbar-thumb">
            <span class="scrollbar-thumb-first"></span>
            <span class="scrollbar-thumb-middle">
            </span><span class="scrollbar-thumb-last"></span>
        </div>
    </div>
</div>

CSS

.scrollbar-track{
   background: black;
    height: 10px;
 }
 
 .scrollbar-thumb{
   cursor: default;
    border: 1px red solid;
    width: 50px;
 }
 .scrollbar-thumb-first{
 display: inline-block;
   background: green;
   width: 5px;
   height: 10px;
 }
 
 .scrollbar-thumb-middle{
 display: inline-block;
   background: red;
   height: 10px;
    width: 20px;
 }
 
 .scrollbar-thumb-last{
 display: inline-block;
   background: blue;
   width: 5px;
   height: 10px;
 }