JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://jvectormap.com/js/jquery-jvectormap-2.0.1.min.js"></script>
<link rel="stylesheet" href="http://jvectormap.com/css/jquery-jvectormap-2.0.1.css">
<script src="http://jvectormap.com/js/jquery-jvectormap-us-aea-en.js"></script>
<div id="map"></div>
<div id="x"></div>
<div id="y"></div>

CSS

#map {
    width: 500px;
    height: 400px;
}

JavaScript

$('#map').vectorMap({
    map: "us_aea_en",
    backgroundColor: "transparent",
    regionStyle: {
        initial: {
            fill: "#818486"
        }
    },
    onRegionClick: function (e, code) {
        var map = $('#map').vectorMap('get', 'mapObject');        
        map.tip.show();
        map.tip.html(code + "<p>Click to Close</p>");
    },
    onRegionTipShow: function (e, tip, code) {
        e.preventDefault();
    }
});