JSFiddle - React, Tailwind, and code Playground

by waitinforatrain

HTML

<div id="video-seek"> 
    <div class="coloured_section" style="left: 78.97%; width: 12%; background-color: hsl(117.00, 100.00%, 45.00%); border-left: 1px solid hsl(117.00, 100.00%, 22.50%)"> 
        
    </div> 
    <div class="coloured_section" style="left: 90.0%; width: 11%; background-color: hsl(279.00, 100.00%, 45.00%); border-left: 1px solid hsl(279.00, 100.00%, 22.50%)"> 
        
    </div> 
    <div id="time"> 
    </div> 
    <div id="time">00:00
    </div>
</div>

CSS

#video-nav {
    width: 300px;
    display: inline;
}

#video-seek {
    width: 300px;
    position: relative;
    border: 1px solid #000;
    height: 10px;
    /*overflow: hidden;*/
}

#video-seek #time {
    position: absolute;
    top: 16px;
    border: 1px solid #444;
}

#video-seek .coloured_section {
    position: absolute;
    top: 0; 
    height: 10px;
}