JSFiddle - React, Tailwind, and code Playground

by BoxMan0617

HTML

<div id="redactor_musicbar">
    <div class="one-bar">
        <div class="horz-bar start"></div>
        <div class="horz-bar end"></div>
        <div class="bar staff1"></div>
        <div class="bar staff2"></div>
        <div class="bar staff3"></div>
        <div class="bar staff4"></div>
        <div class="bar staff5"></div>
    </div>
</div>

CSS

#redactor_musicbar {
    position: relative;
    width: 500px;
    height: 200px;
    border: 1px solid #000;
}

#redactor_musicbar .one-bar {
    position: absolute;
    top: 50%;
    margin-top: -36px;
}

#redactor_musicbar .horz-bar {
    top: 12px;
    width: 2px;
    position: absolute;
    height: 48px;
    background: #000;
}

#redactor_musicbar .start { left: 20px; }
#redactor_musicbar .end { left: 478px; }

#redactor_musicbar .bar {
    left: 20px;
    position: absolute;
    width: 460px;
    height: 10px;
    border-top: 2px solid #000;
}

#redactor_musicbar .staff1 { top: 12px;}
#redactor_musicbar .staff2 { top: 24px;}
#redactor_musicbar .staff3 { top: 36px;}
#redactor_musicbar .staff4 { top: 48px;}
#redactor_musicbar .staff5 { top: 60px;}