JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div id="chart"></div>

CSS

body {
    background: #fff;
}

.bar-container { display:inline-block; width:100%; height:10px; border-radius: 2px; }
.bar { position:relative; display:inline-block; height:10px; transition: all 0.6s cubic-bezier(0, 0.8, 0.6, 0.96); }

.bar-label {
	position: absolute;
	bottom: -30px;
	font-size: 12px;
	text-align: center;
	opacity: 1;
	transition: opacity 1s ease-in-out;
}

.hidden { opacity: 0; }

.short { left:-20px; }
.avg { position:relative; display:inline-block; margin: 0px auto; bottom: -10px; width: 100%}
.long { right:-20px; }

.notch {
	display: inline-block;
    width: 4px;
    height: 12px;
    position: absolute;
    top: -11px;
    left: 48%;
	border-radius: 2px;
}

JavaScript

var CHART = function(o, options, container) {
    $.each(o, function(key, data) {
        var parent = $("<div>"),
			full = $('<span>').addClass('bar-container'),
			bar = $('<span>').addClass('bar'),
			labelShort = $('<span>').html('Shortest<br />' + data.short).addClass('bar-label short hidden'),
			labelAvg = $('<span>').html('Average<br />' + data.avg).addClass('bar-label avg hidden'),
			notch = $('<span>').addClass('notch'),
			labelLong = $('<span>').html('Longest<br />' + data.long).addClass('bar-label long hidden');
        parent.css({ padding: '30px' });
		full.css({ background: options.barBackground });
		bar.css({ marginLeft: '0%', width: '0%', background: options.barColor });
		notch.css({ background: options.notchColor });
        parent.append('<span>Par ' + key + '</span>');
        bar.append(labelShort);
		labelAvg.prepend(notch);
        bar.append(labelAvg);
        bar.append(labelLong);
        full.append(bar);
        parent.append(full);
        container.append(parent);
		//bar.css({ marginLeft: (data.short / 10) + '%', width: (data.long / 10) + '%', background: options.barColor });
    });
	// I hate timeouts, but it was the quickest way to get a cheesy little animation
	// Totally Optional
	setTimeout(function(){
		$.each(o, function(key, data) {
			var bar = $('.bar');
			$(bar[key - 3]).css({ marginLeft: (data.short / 10) + '%', width: (data.long / 10) + '%', background: options.barColor });
		});
		setTimeout(function(){ $('.short, .avg, .long').removeClass('hidden'); }, 500)
	}, 50);
};

var chart = new CHART({
    3: {
        range: [50, 300],
        short: 103,
        avg: 133,
        long: 166,
        total: 5
    },
    4: {
        range: [200, 600],
        short: 202,
        avg: 344,
        long: 420,
        total: 5
    },
    5: {
        range: [400, 800],
        short: 307,
        avg: 466,
        long: 502,
        total: 5
    }
}, {
    barBackground: '#e5e5e5',
    barColor: '#3d7be3',
	notchColor:...