JSFiddle - React, Tailwind, and code Playground

by ryanttb

HTML

<div class="scroller">
    <div class="graphing-widget">
        <div class="background">
            data data data info data data data
        </div>
        <ul class="speed-graphs">
            <li>
                <h3 class="techType">Cable</h3>
                <h4 class="provName">CT Cool</h4>
                <div class="speed-graph">
                    <b>downstream</b>
                    <div class="graph downstream" style="width: 240px;">            
                    </div>
                </div>
                <div class="speed-graph">
                    <b>upstream</b>
                    <div class="graph upstream" style="width: 120px;">
                    </div>
                </div>
            </li>
            <li>
                <h3 class="techType">Cable</h3>
                <h4 class="provName">CT Cool</h4>
                <div class="speed-graph">
                    <b>downstream</b>
                    <div class="graph downstream" style="width: 240px;">            
                    </div>
                </div>
                <div class="speed-graph">
                    <b>upstream</b>
                    <div class="graph upstream" style="width: 120px;">
                    </div>
                </div>
            </li>
            <li>
                <h3 class="techType">Cable</h3>
                <h4 class="provName">CT Cool</h4>
                <div class="speed-graph">
                    <b>downstream</b>
                    <div class="graph downstream" style="width: 240px;">            
                    </div>
                </div>
                <div class="speed-graph">
                    <b>upstream</b>
                    <div class="graph upstream" style="width: 120px;">
                    </div>
                </div>
            </li>
            <li>
                <h3 class="techType">Cable</h3>
                <h4 class="provName">CT Cool</h4>
                <div class="speed-graph">
             ...

CSS

.scroller { position: relative; height: 256px; overflow: auto; width: 540px; }

.provName { margin-left: 8px; }

.speed-graph { margin-left: 16px; }

b { display: inline-block; width: 120px; }

.graph {
    box-shadow: -2px 2px 4px #444;
    height: 12px;
    display: inline-block;
    vertical-align: middle;
    border-radius: 8px;
}

.downstream { background: blue; }

.upstream { background: red; }  

.background
{
    position: absolute;
    left: 136px;
    top: 0;
    right: 0;
    background: #ccc;
    z-index: -1;
}

JavaScript

$(".background").height($(".graphing-widget").height());