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>
<div class="container">
  <div class="row">
    <div class="kpi-item kpi-growth">
      <div class="kpi-header">
        <h3>IT Cost: Total Cost</h3>
        <p>FY15 Forecast</p>
      </div>
      <div class="kpi-body">
        <p class="kpi-details-tl"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAAAnNCSVQICFXsRgQAAAAJcEhZcwAABuwAAAbsAR51ODUAAAAZdEVYdFNvZnR3YXJlAHd3dy5pbmtzY2FwZS5vcmeb7jwaAAABO0lEQVQYGQXBMUsUAAAG0MehoIvDDS1BOYm0tIroj+gWuaMgKNtqEzQwjiOzoTsi6LaDClyEEAyO7kDBFqXJwcXCQRHBA4lz0ZLj6z0REW5b8tWxnraaexERIsJjfxxomvdQw66/XhqKEKHl2oJCRESouLBjKISSG1Nh0ppfTmyYDXdceBUUnauFOVe2vDBv3cBSqPjnPmU9w8ZdqkZEKBuYDbveUtcOq/YVTPjup5mwbiM0dNixEjoa4ZOIvfDMcXikR9e78M3H8EFENzz3Ozx1yhvbYdmREbe898VE2LIWmjYp6RtTdOazkQgFVVcmFRyoMupQK8w4c6Spbt+lubCg764wbaAcipZt6lo1HqZcexIiLBpoGYuIMKzmRitCRJh2qG9b3WttPedKESEiwqgHVnT80FBRjIj4DzJvr7PDjMIkAAAAAElFTkSuQmCC8a320575fc3fd7f95168a2e769af8549"/> $26.5M</span</p>
        <p class="kpi-details-tr">YTD</p>
        <p class="kpi-text green">$26.1M</p>
        <table class="sparkline">
          <tr>
            <td data-sparkline="24, 12, 26 "/>
          </tr>
        </table>
      </div>
    </div>
    <div class="kpi-item kpi-people">
      <div class="kpi-header">
        <h3>Turnover</h3>
        <p>Percent of Positions Vacated</p>
      </div>
      <div class="kpi-body">
        <p class="kpi-details-tl"><img...

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: {
       ...