JSFiddle - React, Tailwind, and code Playground

by solidsource

HTML

<div class="container">
    <div class="graph">
        <div class="indicator"></div>
        <div class="value">50</div>
    </div>
    <div class="range">
        <div class="max">100</div>
        <div class="min">0</div>
    </div>
</div>

CSS

.container {
    position:relative;
    float:left;
}
.graph {
    position:relative;
    overflow:hidden;
    width:100px;
    height:14px;
    background:#aaa;
}
.indicator {
    position:absolute;
    top:0;
    left:-50px;
    height:14px;
    width:100px;
    background:green;
    z-index:5;
}
.value {
    position:absolute;
    top:0;
    left:50px;
    width:100px;
    font-size:9px;
    background:transparent;
    z-index:6;
    color:#fff;
    padding:1px 3px;
}
.range {
    position:relative;
    overflow:hidden;
}
.min {
    float:left;
    font-size:8px;
    padding:0 2px;
    border-left:1px solid #aaa;
}
.max {
    float:right;
    font-size:8px;
    padding:0 2px;
    border-right:1px solid #aaa;
}