JSFiddle - React, Tailwind, and code Playground

HTML

<div class="col" style="left: -3920px; width: 280px;">
<div class="periods">
    <div class="period3"></div>
    <div class="period2"></div>
    <div class="period1"></div>
    <div class="nodeline colBk">
        <div class="node colBrd"></div>
    </div>
</div>
<div class="inner">
    <div class="group first">
        <div class="branch colBk"></div>
        <a class="story">
            <div class="strip colBk"></div>
            <div class="caption">
                <div class="text">
                    <p class="title">Test</p>
                </div>
            </div>
        </a>
    </div>
</div>

CSS

.tls .col { display: inline-block; position: absolute; top: 0; }
.periods { height: 72px; overflow:hidden; position: relative; border-left: 1px solid #fff; }
.period2 { height: 30px; opacity: 0.6; background-color: #fff; position: absolute; width: 100%; }
.period1 { height: 25px; opacity: 0.72; top: 30px; background-color: #fff; position: absolute; width: 100%; }
.nodeline { height: 61px; }
.colBk { background-color: #dd545c; }
.nodeline { height: 61px; }
.node { position: absolute; height:17px;margin-left: -15px; left: 50%; bottom: 0px; width: 17px; height: 17px; border-radius: 50%; border: 6px solid #dd545c; background-color: #f9f9f9; }
.colBrd { border-color: #dd545c; }