JSFiddle - React, Tailwind, and code Playground

by totszwai

HTML

<br/><br/><br/>
<table style="width:100%;">

<tr>
<td>
<div class="progressBarWrapper">
    <table class="progressTLTable" valign="center">
        <tbody>
            <tr>
                <td class="progressTL-L">
                    <div id="progressTL-L-anchor">0</div>
                </td>
                <td class="progressTL-M">
                    <div class="progressTLMiddleLine"/>
                    <div class="progressTLArrowUp" style="left:49%;"></div>
                    <div class="progressTLTextBox">30 days left</div>
                </td>
                <td class="progressTL-R">
                    <div id="progressTL-R-anchor">90</div>
                </td>
            </tr>
        </tbody>
    </table>
    <div class="minProgressBarWidth"><div/></div>
</div>
</td>
</tr>
    
</table>

CSS

.progressBarTable {
	border-collapse: collapse; 
	width: 100%;
}

.progressBarTable tr {
	background:inherit !important;
}

table tr td.noBorder { 
	border-style: none !important; 
	white-space: nowrap; 
}

tr td.progressBarBarValue { 
    height: 12px !important;
	width: 100%; 
	padding-right:5px!important;
}

tr td span.progressBarPercentValue { 
	width:30px; 
	display:block; 
	text-align:right; 
}

tr td span.progressBarTextValue { 
	display:block; 
	text-align:right; 
}

/* container of the actual bar, draws the border to 100% */
.progressBarContainer {
	width: 100%; 
	height:12px; 
	border-style:solid; 
	border-width:1px; 
	padding: 1px 1px; 
	border-color:#9FAAB7;
	background-color:#FFFFFF;
}

.proficiencyBarContainer {
	width: 80px; 
	height:12px; 
	border-style:solid; 
	border-width:1px; 
	padding: 1px 1px; 
	border-color:#9FAAB7;
	background-color:#FFFFFF;
}


 /* color section of the filled percentage , this sit inside progressBarContainer */
.progressBarActual {
	height:12px; 
}

/* use it for overlaying percentage value in the middle of the bar */
.progressBarOverlay {
	position:absolute; 
	top:3px; 
	left:40%; 
}

.progressBarOverlayLeft { 
	position:absolute; 
	top:0px; 
	left:0px; 
}

.progressBarOverlayRight { 
	position:absolute; 
	top:0px; 
	right:0px; 
}

.progressBarWrapper {
	position:relative;
}

/* other class to control the behavior of the progress bar etc */
.minProgressBarWidth { width: 120px; }
.minProgressBarWithTextWidth { width: 200px; }
.minProgressBarChartWidth { width: 90px; }




.progressTLTable {
	border-collapse: collapse; 
	width: 100%;
    height: 32px;
	font-size:.6em;
	font-family: Arial, Helvetica, sans-serif;
}

.progressTL-L {
	padding-left:20px;
    vertical-align: top;
}

.progressTL-M {
	padding-left:5px;
	padding-right:5px;
	padding-bottom:5px; 
	margin:0px;
	border:none;
	width:100%;
    vertical-align: top;
}

.progressTL-R {
	padding-right:20px;
    vertical-align: top;
}

.progressTLMiddleLine {
	border:1px...

JavaScript

$(document).ready(function() {
       progressTimelineValidate();
        $(window).bind("resize", progressTimelineValidate);
     });


    function progressTimelineValidate() {
        allTimeline = $('.progressTLTable');    
        for (i = 0; i < allTimeline.length; i++) {
           
            var tl = $(allTimeline[i]);
            var indicator = tl.children().find('div.progressTLArrowUp');
            var box = tl.children().find('div.progressTLTextBox');
            
            var boxWidth;
            var indicatorPos;
            // earlier IE don't support this feature
            if (!$.support.cssFloat) { // we are in IE
                boxWidth = box[0].clientWidth;
                indicatorPos = indicator[0].style.pixelLeft;
            } else {
                boxWidth = box.width();
                indicatorPos = parseInt(indicator.css('left').replace(/[px]/g, ''));      
            }
            var anchorRightPos = parseInt($("div#progressTL-R-anchor").position().left);
            var upperBound = anchorRightPos - boxWidth*2;
           
            /*
            console.log('   indicator:' + indicatorPos);
            console.log('right anchor:' + anchorRightPos);
            console.log(' upper bound:' + upperBound);
            */
            
            // workaround for the position:relative, once you set it to relative,
            // the left property becomes the position of where the element is at
            var inlinestyle = {};
            $.each(indicator.attr('style').split(';'), function() {
                namevalue = this.split(':');
                inlinestyle[namevalue[0].toLowerCase()] = namevalue[1];
            }); // end workaround
            
            // retrive the percentage value
            var p = parseInt(inlinestyle.left.replace(/[%]/g, '')); 
           
            if (p > 50) {
                 if (indicatorPos > upperBound) {
                     box.css('left', ''); 
                    ...