JSFiddle - React, Tailwind, and code Playground

by SchmalzyB

HTML

<script src="http://fonts.googleapis.com/css?family=Open+Sans"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

CSS

body {
  padding: 50px;
  font-family: 'Open Sans', sans-serif;
}

.row {
  min-width: 800px;
}

.kpi-item,
.kpi-item * {
    box-sizing: border-box;
}

.kpi-item {
  float: left;
  width: 250px;
  height: 250px;
  margin-right: 15px;
  margin-bottom: 15px;
  border: 1px solid #ebebeb;
  border-radius: 3px;
}

.kpi-header {
  position: relative;
  height: 60px;
  padding: 10px;
  background-color: #fff;
}

.kpi-header h3 {
  margin: 0;
  font-size: 18px;
  line-height: 18px;
}

.kpi-header p {
  position: absolute;
  color: #666;
  font-size: 14px;
  margin: 0;
  left: 10px;
  bottom: 8px;
}

.kpi-growth .kpi-header {
  border-bottom: 3px solid #0A58A4;
}

.kpi-growth > .kpi-header {
 background-color: #E6EEF6;
}

.kpi-growth h3,
.kpi-growth .value {
  color: #0A58A4;
}

.kpi-flawless .kpi-header {
  border-bottom: 3px solid #BC1A40;
}

.kpi-flawless > .kpi-header {
 background-color: #F8E8EC;
}

.kpi-flawless h3,
.kpi-flawless .value {
  color: #BC1A40;
}

.kpi-people .kpi-header {
  border-bottom: 3px solid #198D69;
}

.kpi-people > .kpi-header {
 background-color: #E8F4F0;
}

.kpi-people h3,
.kpi-people .value {
  color: #198D69;
}

.kpi-body {
  position: relative;
  height: 185px;
  background-color: #fff;
}

.kpi-body .kpi-text {
  margin: 0;
  font-size: 42px;
  line-height: 160px;
  text-align: center;
}

.kpi-body .kpi-details-tr {
  position: absolute;
  top: 10px;
  right: 10px;
  margin:0;
  font-size: 16px;
  color: #666;
}

.kpi-details-tl {
  position: absolute;
  top: 10px;
  left: 10px;
  margin:0;
  font-size: 16px;
  line-height: 16px;
  color: #666;
}

.kpi-details-tl img {
  position: relative;
  top:1px;
}

.green {
  color: #2ecc71;
}

.yellow {
  color: #f1c40f;  
}

.red {
  color: #e74c3c;
}

.sparkline {
  position: absolute;
  bottom: 10px;
  left: 10px;
}

JavaScript

$(function () {
    /**
     * Create a constructor for sparklines that takes some sensible defaults and merges in the individual
     * chart options. This function is also available from the jQuery plugin as $(element).highcharts('SparkLine').
     */
  
    Highcharts.SparkLine = function (options, callback) {
        var defaultOptions = {
            chart: {
                renderTo: (options.chart && options.chart.renderTo) || this,
                backgroundColor: null,
                borderWidth: 0,
                type: 'area',
                margin: [2, 0, 2, 0],
                width: 120,
                height: 20,
                style: {
                    overflow: 'visible'
                },
                skipClone: true
            },
            title: {
                text: ''
            },
            credits: {
                enabled: false
            },
            xAxis: {
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                },
                startOnTick: false,
                endOnTick: false,
                tickPositions: []
            },
            yAxis: {
                endOnTick: false,
                startOnTick: false,
                labels: {
                    enabled: false
                },
                title: {
                    text: null
                },
                tickPositions: [0]
            },
            legend: {
                enabled: false
            },
            tooltip: {
                backgroundColor: null,
                borderWidth: 0,
                shadow: false,
                useHTML: true,
                hideDelay: 0,
                shared: true,
                padding: 0,
                positioner: function (w, h, point) {
                    return { x: point.plotX - w / 2, y: point.plotY - h};
                }
            },
            plotOptions: {
       ...