JSFiddle - React, Tailwind, and code Playground

HTML

<div id="vmap"></div>



<script>/*!
 * jQVMap Version 1.0
 *
 * http://jqvmap.com
 *
 * Copyright 2012, Peter Schmalfeldt <manifestinteractive@gmail.com>
 * Copyright 2011-2012, Kirill Lebedev
 * Licensed under the MIT license.
 *
 * Fork Me @ https://github.com/manifestinteractive/jqvmap
 */
(function ($) {

    var apiParams = {
        colors: 1,
        values: 1,
        backgroundColor: 1,
        scaleColors: 1,
        normalizeFunction: 1,
        enableZoom: 1,
        showTooltip: 1,
        borderColor: 1,
        borderWidth: 1,
        borderOpacity: 1,
        selectedRegions: 1,
        multiSelectRegion: 1
    };

    var apiEvents = {
        onLabelShow: 'labelShow',
        onRegionOver: 'regionMouseOver',
        onRegionOut: 'regionMouseOut',
        onRegionClick: 'regionClick',
        onRegionSelect: 'regionSelect',
        onRegionDeselect: 'regionDeselect'
    };

    $.fn.vectorMap = function (options) {

        var defaultParams = {
            map: 'world_en',
            backgroundColor: '#a5bfdd',
            color: '#f4f3f0',
            hoverColor: '#c9dfaf',
            selectedColor: '#c9dfaf',
            scaleColors: ['#b6d6ff', '#005ace'],
            normalizeFunction: 'linear',
            enableZoom: true,
            showTooltip: true,
            borderColor: '#818181',
            borderWidth: 1,
            borderOpacity: 0.25,
            selectedRegions: null,
            multiSelectRegion: false
        }, map = this.data('mapObject');

        if (options === 'addMap') {
            WorldMap.maps[arguments[1]] = arguments[2];
        } else if (options === 'set' && apiParams[arguments[1]]) {
            map['set' + arguments[1].charAt(0).toUpperCase() + arguments[1].substr(1)].apply(map, Array.prototype.slice.call(arguments, 2));
        } else if (typeof options === 'string' &&
                typeof map[options] === 'function') {
            return map[options].apply(map, Array.prototype.slice.call(arguments,...

CSS

/*!
 * jQVMap Version 1.0 
 *
 * http://jqvmap.com
 *
 * Copyright 2012, Peter Schmalfeldt <manifestinteractive@gmail.com>
 * Licensed under the MIT license.
 *
 * Fork Me @ https://github.com/manifestinteractive/jqvmap
 */
.jqvmap-label
{
	position: absolute;
	display: none;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: red;
	color: white;
	font-family: sans-serif, Verdana;
	font-size: smaller;
	padding: 3px;
}
.jqvmap-zoomin, .jqvmap-zoomout
{
	position: absolute;
	left: 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background: #000000;
	padding: 3px;
	color: white;
	width: 10px;
	height: 10px;
	cursor: pointer;
	line-height: 10px;
	text-align: center;
}
.jqvmap-zoomin
{
	top: 10px;
}
.jqvmap-zoomout
{
	top: 30px;
}
.jqvmap-region
{
  cursor: pointer;
}
.jqvmap-ajax_response
{
  width: 100%;
  height: 500px;
}
#vmap {
    width: 600px;
    height: 450px;
}

JavaScript

$('#vmap').vectorMap({
        map: 'world_en',
        backgroundColor: null,
        borderColor: '#fbf8ed',
        color: '#e7d8c5',
        hoverColor: '#87acc7',
        selectedColor: '#87acc7',
        enableZoom: false,
        showTooltip: true,
        onRegionClick: function (element, code, region)
        {
            var countriCode = code;
            getCode(countriCode);
            // console.log(code);


        }
    });