JSFiddle - React, Tailwind, and code Playground

by Jannik

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.4/jquery-jvectormap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jvectormap/2.0.4/jquery-jvectormap.min.js"></script>
<script src="http://jvectormap.com/js/jquery-jvectormap-europe-mill.js"></script>
<div class="text-wrap">
  <div class="country-info first">
    <p>Steht von Anfang an da</p>
  </div>
  <div class="country-info fallback">
    <p>Kommt wenn Land keine Box hat</p>
  </div>
  <div class="country-info" data-country="IT">
    <h3>Italien</h3>
    <p>bubbedi
      <br /> babbedi
    </p>
  </div>
  <div class="country-info" data-country="DE">
    <h3>Deutschland</h3>
    <p>bubbedi
      <br /> babbedi
    </p>
  </div>
  <div class="country-info" data-country="ES">
    <h3>Spanien</h3>
    <p>bubbedi
      <br /> babbedi
    </p>
  </div>
</div>
<div id="world-map" style="width:50%;height:260px;"></div>

CSS

body {
  background-color: #fbb040;
}

.country-info {
  display: none;
  color: #fff;
  margin: 0;
}

.text-wrap {
  float: left;
  width: 50%;
}

.country-info.first {
  display: block;
}

JavaScript

$(function() {
  $('#world-map').vectorMap({
    map: 'europe_mill',
    zoomOnScroll: false,
    zoomMax: 1,
    backgroundColor: '#fdb140',
    regionStyle: {
      initial: {
        fill: 'white',
        "fill-opacity": 1,
        stroke: 'none',
        "stroke-width": 0,
        "stroke-opacity": 1
      },
      hover: {
        "fill-opacity": 0.8,
        cursor: 'pointer'
      },
      selected: {
        fill: 'yellow'
      },
      selectedHover: {}
    }
  });

  $("#world-map path").click(function() {
    var countryCode = $(this).attr("data-code");
    var $info = $('.country-info[data-country="' + countryCode + '"]');
    var $fallback = $('.country-info.fallback');
    $(".country-info").fadeOut(300);
    if ($info.length > 0) {
      $info.delay(400).fadeIn(300);
    } else {
      $fallback.delay(400).fadeIn(300);
    }
  });
});