JSFiddle - React, Tailwind, and code Playground

by Arko

HTML

<section>
    <div id="video">
    </div>
    <div id="timeline">
        <div id="timeline-slider">
            <div id="cursor">
                
            </div>
        </div>
        <div class="annotation" style="left:22%;width:4.1%">
        </div>
        <div class="annotation" style="left:37%;width:1px">
        </div>
        <div class="annotation" style="left:84%;width:1.2%">
        </div>
        <div class="annotation" style="left:24%;width:3.2%">
        </div>
    </div>
</section>

CSS

body {
    background-color: rgb(40,40,40);
}

section {
    margin: 2em;
}

#video {
    width: 100%;
    height: 10em;   
    background-color: rgba(0,0,0,0.4);
    border: 1px solid rgb(0,0,0);
}

#timeline {
    margin-top: 2px;
    width: 100%;
    height: 2em;
    background-color: rgba(0,0,0,0.4);
    border: 1px solid rgb(0,0,0);
}

#timeline-slider {
    margin: 3px;
    height: 20%;
    background-color: rgba(255,255,255,0.2);
}

#cursor {
    position: relative;
    top: -1px;
    left: 30%;
    width: 2px;
    height: 140%;
    background-color: rgba(0,220,255,0.6);
}

.annotation {
    float: left;
    position: relative;
    top: 0px;
    height: 60%;
    background-color: rgba(255,255,100,0.3);
}