JSFiddle - React, Tailwind, and code Playground

by Hari Menon

HTML

<div class="barChart" data-value="64" data-title="Apples"></div>
<div class="barChart" data-value="36" data-title="Oranges"></div>
<div class="barChart" data-value="50" data-title="Pears"></div>
<div class="barChart" data-value="4" data-title="Peaches"></div>
<div class="barChart" data-value="2" data-title="Kiwis"></div>

CSS

body { padding:50px }
.barChart {
	width:100%;
	margin:5px;
}
	.barChart .barLabel {
	    float:left;
		font-size:12px;
		color:#BBB;
	}
	.barChart .barContainer {
	    width:-webkit-calc(100%-85);	
        margin-left:75px;
    
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		height:15px;
		padding:1px;
		border:1px solid #EEE;
	}
	.bar {
		-moz-box-sizing: border-box; 
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		height:100%;
		
		border:1px solid #FF0000;
		background: #CC0000; /* Old browsers */
		background: -moz-linear-gradient(top, #FF0000 0%, #CC0000 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF0000), color-stop(100%, #CC0000)); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, #FF0000 0%, #CC0000 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, #FF0000 0%, #CC0000 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(top, #FF0000 0%, #CC0000 100%); /* IE10+ */
		background: linear-gradient(to bottom, #FF0000 0%, #CC0000 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FF0000', endColorstr='#CC0000', GradientType=0 ); /* IE6-9 */
	}
	.barValue {
	    float:right;
        margin-top:-2px;
		font-size:10px;
        color:#FFF;
	}

JavaScript

$(function() {
	$(".barChart").each(function() {
        $(this).html("<div class='barLabel'>" 
			+ $(this).data('title') + 
		"</div><div class='barContainer'><div class='bar' style='width:" 
			+ $(this).data('value') + 
		"%'><div class='barValue'>" 
			+ $(this).data('value') + "%" 
			+ "</div></div></div>");
		if($(this).data('value') <= 10) {
			$(this, ".barContainer .barValue").css({
				"margin-right": "-20px",
				"color": "#000",
			});
		}
	});
});