JSFiddle - React, Tailwind, and code Playground

HTML

<div id="column">               
    <div class="container">        
        <div class="event red"></div>        
        <div class="event blue"></div>
        <div class="event black"></div>
        <div class="event red"></div>        
        <div class="event blue"></div>
        <div class="event black"></div>
        <div class="event red"></div>        
        <div class="event blue"></div>
        <div class="event black"></div>
    </div>
</div>

CSS

#column {
    height:300px;
    margin:0 auto;
}

.container {
    min-height:1px;
    z-index:1;
}

.event {
    height:20px;
    z-index:2;
    position:relative;
    border-bottom:1px solid #ffffff;
}

.red { background-color:#f00; width:300px; }
.blue { background-color:#00f; width:150px; }
.black { background-color:#000; width:250px; }