JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.lexmundi.com/images/lexmundi/Template/AfricaMap/jquery-jvectormap-1.2.2.css">
<script src="http://www.lexmundi.com/images/lexmundi/Template/AfricaMap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="http://www.lexmundi.com/images/lexmundi/Template/AfricaMap/jquery-jvectormap-africa.js"></script>
<link rel="stylesheet" href="http://www.lexmundi.com/images/lexmundi/Template/2013/stylesheets/foundation.min.css">
<link rel="stylesheet" href="http://www.lexmundi.com/images/lexmundi/Template/2013/stylesheets/app.css">
<div class="row">
<div class="eight columns content">

<div class="africa-map-container">

<div id="africa-map" style="width: 600px; height: 700px;">
  <div class="region-info-box al">
    <h3>World Ready Experience</h3>
    <p>Gide advised Renault on setting up a strategic partnership with the SNVI and the NIF to establish a plant at Oued Tlelat. This is the first time an automotive manufacturer had a project to set up a manufacturing plant in Algeria.</p>
    <img src="http://www.lexmundi.com/images/lexmundi/Template/2013/images/logo-foot-wht.png" /> </div>
  <div class="region-info-box an">
    <h3>World Ready Experience</h3>
    <p>Gide advised Renault on setting up a strategic partnership with the SNVI and the NIF to establish a plant at Oued Tlelat. This is the first time an automotive manufacturer had a project to set up a manufacturing plant in Algeria.</p>
    <img src="http://www.lexmundi.com/images/lexmundi/Template/2013/images/logo-foot-wht.png" /> </div>
  <div class="region-info-box ey">
    <h3>World Ready Experience</h3>
    <p>Gide advised Renault on setting up a strategic partnership with the SNVI and the NIF to establish a plant at Oued Tlelat. This is the first time an automotive manufacturer had a project to set up a manufacturing plant in Algeria.</p>
    <img src="http://www.lexmundi.com/images/lexmundi/Template/2013/images/logo-foot-wht.png" /> </div>
  <div class="region-info-box gh">
...

CSS

body {
	background: #fff;
}

.jvectormap-label {
    
    width: 290px;
	min-height: 120px;
    /*padding: 15px;*/
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	border-radius: 0px;
	background: rgb(0,124,196);
    background: transparent\9;
	background: rgba(0,124,196,0.7);
	zoom: 1;
    color: #fff;
}

.jvectormap-label, .jvectormap-label h1, jvectormap-label h2, .jvectormap-label h3 {
	color: #fff;
}

.region-info-box {
	display: none;
}

JavaScript

$(function() {
	var RColor = '#007cc4'
    var activeRegions = [
		"al", "an", "ey", "gh", "ic", "ke", "mu", "mz", "na", "ni", "za", "tz", "tu", "ug"
    ];
    
    var regionInfo = {
        "al" : { "location": "$AC:MENUURL:2918$" }, 
        "an" : { "location": "$AC:MENUURL:2922$" }, 
        "ey" : { "location": "$AC:MENUURL:2919$" }, 
        "gh" : { "location": "$AC:MENUURL:2937$" }, 
        "ic" : { "location": "$AC:MENUURL:2918$" }, 
        "ke" : { "location": "$AC:MENUURL:2923$" }, 
        "mu" : { "location": "$AC:MENUURL:2924$" }, 
        "mz" : { "location": "$AC:MENUURL:2925$" }, 
        "na" : { "location": "$AC:MENUURL:2926$" }, 
        "ni" : { "location": "$AC:MENUURL:2927$" }, 
        "za" : { "location": "$AC:MENUURL:2928$" }, 
        "tz" : { "location": "$AC:MENUURL:2929$" }, 
        "tu" : { "location": "$AC:MENUURL:2930$" }, 
        "ug" : { "location": "$AC:MENUURL:2931$" }
    }
    
    $('#africa-map').vectorMap({
        map: 'africa',
        backgroundColor: 'transparent',
        zoomOnScroll: false,
        zoomButtons: false,
        regionStyle: {
            initial: {
                fill: '#b7bdc3',
                scaleColors: ['#b7bdc3', '#a2aaad'],
                "fill-opacity": 1,
                stroke: '#a2aaad',
                "stroke-width": 2,
                "stroke-opacity": 1
            },
            hover: {
                "fill-opacity": 0.8
            },
            selected: {
                fill: '#a2aaad'
            },
            selectedHover: {
                fill: '#a2aaad'
            }
        },
        series: {
					regions: [{values: {
						"al" : RColor,
						"an" : RColor,
						"ey" : RColor,
						"gh" : RColor,
						"ic" : RColor,
						"ke" : RColor,
						"mu" : RColor,
						"mz" : RColor,
						"na" : RColor,
						"ni" : RColor,
						"za" : RColor,
						"tz" : RColor,
						"tu" : RColor,
						"ug" : RColor
						},
						attribute: 'fill'
						}]
					},				...