JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<ul id="pipes">
    <li class="pipe" id="sequence1">
        <ol>
            <li class="node a">
                <span class="red"></span>
                <span class="green"></span>
                <span class="blue"></span>
            </li>
            <li class="node b">
                <span class="red"></span>
                <span class="green"></span>
                <span class="blue"></span>
            </li>
            <li class="pipe">
                <ol>
                    <li class="node c">
                        <span class="red"></span>
                        <span class="green"></span>
                    </li>
                </ol>
            </li>
        </ol>
    </li>
</ul>

CSS

ul, ol, li {border: 2px solid rgba(255,0,0,0.25);}

#pipes {
    position: absolute;
    top: 40px;
    left: 120px;
}
#sequence1 {
    position: absolute;
    top: 20px;
    left: 20px;
}

.node {position: absolute;}
.node.a {
    left: 100px; top: 100px;
}
.node.b {
    left: 10px; top: 30px;
}
.node.c {
    left: 120px; top: 80px;
}

.pipe li span {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
}

.red {border: 1px solid red;}
.green {border: 1px solid green;}
.blue {border: 1px solid blue;}