JSFiddle - React, Tailwind, and code Playground

by LostInDaJungle

HTML

<div class="container">
    <div class="markers">
    <div id="m1"><div>3 Year</div>&darr;</div>
    <div id="m2"><div>5 Year</div>&darr;</div>
    <div id="m3"><div>6 Year</div>&darr;</div>
    </div>
    <div class="pct1" id="pct1">
    </div>
    <div class="pct2" id="pct2">
    </div>
</div>

CSS

.container {width: 90%; height: 40px;}
.pct1 {width: 33%; background-color: #ABD9E9; float: left; height: 20px;}
.pct2 {width: 67%; background-color: #2C7BB6; float: right; height: 20px;}
.markers {position: relative;  height: 20px;}
#m1 {position: absolute; font-size: .75em;}
#m1 div {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
}
#m2 {position: absolute; font-size: .75em;}
#m2 div {
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
}
#m3 {position: absolute; font-size: .75em;}
#m3 div {filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
-webkit-transform: rotate(-45deg); 
-moz-transform: rotate(-45deg); 
margin-left: -4px;
}

JavaScript

var adSave = 2130;
var profit = 3000;
var total = adSave + profit;
var adSave_pct = adSave / total * 100;
var profit_pct = 100 - adSave_pct;
$('#pct1').css('width', adSave_pct + '%');
$('#pct2').css('width', profit_pct + '%');
var m1 = 1600;
var m2 = 1000;
var m3 = 800;
var m1_pct = m1 / total * 100;
var m2_pct = m2 / total * 100;
var m3_pct = m3 / total * 100;
$('#m1').css('left', m1_pct + '%');
$('#m2').css('left', m2_pct + '%');
$('#m3').css('left', m3_pct + '%');