JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<div id="card"></div>

CSS

body { background: #fff; }

#card { padding: 30px; }
.scorecard { list-style: none; padding: 0px; }

.scorecard li {
    border-right: solid 1px #e5e5e5;
    display: inline-block;
	text-align: center;
	width: 24%;
}

.scorecard li h2, .scorecard li p { margin: 2px 0px; }
.scorecard li h2 { font-size: 20px; }
.scorecard li p { font-size: 12px; margin: 0px; color: #a29e9e; }
.scorecard li:last-child { border-right: none; }

.section-container {
    display: inline-table;
    padding: 30px 0px;
    width: 100%;
}

.section-label {
    display: table-cell;
    width: 10%;
    vertical-align: middle;
	text-align: center;
}

.section-label h3 { font-size: 14px; margin: 0px; }
.section-label p { font-size: 12px; margin: 0px; color: #a29e9e; }
.wrap { display: table-cell; width: 90%; }

.bar-container {
    width: 100%;
    max-height: 10px;
    border-radius: 2px;
    vertical-align: middle;
    display: inline-block;
}

.bar {
    position: relative;
    display: inline-block;
    height: 10px;
    transition: all 0.5s;
}

.bar-label {
    position: absolute;
    bottom: -30px;
    font-size: 12px;
    text-align: center;
}

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

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

JavaScript

var CARD = function(o, course, options, container) {

    var scorecard = $('<ul>').addClass('scorecard');
    scorecard.append('<li><h2>' + course.par + '</h2><p>par</p></li>');
    scorecard.append('<li><h2>' + course.yards + '</h2><p>yards</p></li>');
    scorecard.append('<li><h2>' + course.rating + '</h2><p>rating</p></li>');
    scorecard.append('<li><h2>' + course.slope + '</h2><p>slope</p></li>');
    container.append(scorecard);

    $.each(o, function(key, data) {
        var parent = $("<div>").addClass('section-container'),
            wrap = $('<span>').addClass('wrap'),
            full = $('<span>').addClass('bar-container'),
            bar = $('<span>').addClass('bar'),
            labelShort = $('<span>').html('Shortest<br />' + data.short).addClass('bar-label short'),
            labelAvg = $('<span>').html('Average<br />' + data.avg).addClass('bar-label avg'),
            labelLong = $('<span>').html('Longest<br />' + data.long).addClass('bar-label long'),
            notch = $('<span>').addClass('notch'),
            sectionLabel = $('<span>').html('<h3>Par ' + key + '</h3><p>' + data.total + ' total</p>').addClass('section-label');
        full.css({ background: options.barBackground });
		notch.css({ background: options.notchColor });
        bar.css({
			marginLeft: getStartPos(data.range[1], data.range[0], data.long, data.short) + '%',
            width: getWidth(data.range[1], data.range[0], data.long, data.short) + '%',
            background: options.barColor
        });
        parent.append(sectionLabel);
        labelAvg.prepend(notch);
        bar.append(labelShort).append(labelAvg).append(labelLong);
        full.append(bar);
        wrap.append(full);
        parent.append(wrap);
        container.append(parent);
    });

    function getWidth(maxPos, minPos, max, min) {
        var denom = maxPos - minPos;
		var value = (((max - min) / denom) * 100).toFixed(2);
		var total = parseFloat(value) + parseFloat(getStartPos(maxPos,...