JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.maps.js"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.usa.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>
<div>
    <div>
      <div id="myModal" class="modal">
            <span class="close">&times;</span>
            <div id="attrsDiv">
              <p>Info</p>
            </div>
       </div>
    </div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-left:80;
    padding-right:20;
    padding-top:20;
    top: 0;
    width: 300px; /* Full width */
    height: 100px; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: #ffffff; /* Fallback color */
    opacity:0.8;
}
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td{
    text-align: center;
    padding: 8px;
}
th {
    text-align: center;
    font-weight: bold;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

JavaScript

FusionCharts.ready(function () {
    var salesMap = new FusionCharts({
        type: 'usa',
        renderAt: 'chart-container',
        width: '500',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Annual Sales by State",
                    "subcaption": "Last year",
                    "entityFillHoverColor": "#cccccc",
                    "numberPrefix": "$",
                    "showLabels": "1",
                    "theme": "fint"
            },
                "colorrange": {
                "minvalue": "920000",
                    "startlabel": "Low",
                    "endlabel": "High",
                    "code": "#e44a00",
                    "gradient": "1",
                    "color": [{
                    "maxvalue": "56580000",
                        "displayvalue": "Average",
                        "code": "#f8bd19"
                }, {
                    "maxvalue": "97400000",
                        "code": "#6baa01"
                }]
            },
                "data": [{
                "id": "HI",
                    "value": "3189000"
            }, {
                "id": "DC",
                    "value": "2879000"
            }, {
                "id": "MD",
                    "value": "33592000"
            }, {
                "id": "DE",
                    "value": "4607000"
            }, {
                "id": "RI",
                    "value": "4890000"
            }, {
                "id": "WA",
                    "value": "34927000"
            }, {
                "id": "OR",
                    "value": "65798000"
            }, {
                "id": "CA",
                    "value": "61861000"
            }, {
                "id": "AK",
                    "value": "58911000"
            }, {
                "id": "ID",
                    "value": "42662000"
            }, {
                "id": "NV",
                   ...