JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" type="text/css" />
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/maps/modules/map.js"></script>
<script src="https://code.highcharts.com/maps/modules/data.js"></script>
<script src="https://code.highcharts.com/mapdata/countries/us/custom/us-small.js"></script>

<div id="container">

    <div class="loading">
        
        <i class="icon-spinner icon-spin icon-large"></i>
        Loading data from Google Spreadsheets...
        
    </div>
    
</div>

CSS

#container {
    height: 500px;
    min-width: 310px;
    max-width: 800px;
    margin: 0 auto;
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}

JavaScript

$(function () {
    // Load the data from a Google Spreadsheet
    // https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
    Highcharts.data({

        googleSpreadsheetKey: '0AoIaUO7wH1HwdDFXSlpjN2J4aGg5MkVHWVhsYmtyVWc',
        googleSpreadsheetWorksheet: 1,

        // custom handler for columns
        parsed: function (columns) {

            // Make the columns easier to read
            var keys = columns[0],
                names = columns[1],
                percent = columns[10];

            // Read the columns into the data array
            var data = [];
            $.each(keys, function (i, key) {
                if (i != 0)
                    data.push({
                        'hc-key': 'us-'+key,
                        code: key.toUpperCase(),
                        value: parseFloat(percent[i]),
                        name: names[i],
                        row: i
                    });
            });

            var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);

            // Process mapdata
            $.each(mapData, function () {
                var path = this.path,
                    copy = { path: path };

                // This point has a square legend to the right
                if (path[1] === 9727) {

                    // Identify the box
                    Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);

                    // Place the center of the data label in the center of the point legend box
                    this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
                    this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);

                }
                // Tag it for joining
                this.ucName = this.name.toUpperCase();
            });

            // Initiate the chart
            var options = {
   ...