JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.highcharts.com/maps/highmaps.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],
            // Initiate the chart
            options = {
                chart : {
                    renderTo: 'container',
                    type: 'map',
                    borderWidth : 1
                },

                title : {
                    text : 'US presidential election 2008 result'
                },

                subtitle: {
                    text: 'Source: <a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' +
                        '_2008#Election_results">Wikipedia</a>'
                },

                mapNavigation: {
                    enabled: true,
                    enableButtons: false
                },

                legend: {
                    align: 'right',
                    verticalAlign: 'top',
                    x: -100,
                    y: 70,
                    floating: true,
                    layout: 'vertical',
                    valueDecimals: 0,
                    backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)'
                },

                colorAxis: {
                    dataClasses: [{
                        from: -100,
                        to: 0,
                        color: '#C40401',
                        name: 'McCain'
                    }, {
                        from: 0,
                        to: 100,
          ...