JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html><html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>바 시리즈</title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realmap {
	width: 850px;
	height: 750px;
    border: 1px solid lightgray;
    margin-bottom: 20px;
}
</style>
<link href="https://unpkg.com/realmap/realmap-style.css" rel="stylesheet" crossorigin="anonymous">
<link href="https://unpkg.com/realmap/realmap-export-style.css" rel="stylesheet" crossorigin="anonymous">

<style>
.green-layout {
    background-color: #00880020;
}
.red-button {
    color: red;
}
</style>



<script type="text/javascript" src="https://unpkg.com/realmap/export.js"></script>
<script type="text/javascript" src="https://unpkg.com/realmap/index.js"></script>



<script type="text/javascript">
	window.addEventListener('DOMContentLoaded', function () {
		try {
			init();
		} catch (err) {
			alert(err);
			console.error(err);
		}
	});	
</script>

  <script>
    var realMapLic = "upVcPE+wPOl3H1t2EmYDS2ZHHsIGhYOFvAiOqCN7jMScsYfjJ8xYHvcnjNP/alBGvwgv6MHcLk1itlg31ZMil9o5hU+SYjm4Y36LXWAlUU4zFfHLyfJrYkJ/CQ8eAe9knEDoO6g6qItm79yHT0KSfOj61RRag6zMyWEhOl7O9n/Hwl6Ih/mjqr3cLQlHWabvEhVyY82R38U=";
  </script>
</head>
<body>
	<div id="realmap"></div>
	<div id="actions"></div>

		</body></html>

JavaScript

const data = [{
  "name": "NORTH AMERICA",
  "coord": [-100.0, 45.0],
  "value": [19, 40, 41]
}, {
  "name": "EUROPE",
  "coord": [10.0, 55.0],
  "value": [29, 35, 36]
}, {
  "name": "ASIA / ASIA-PACIFIC",
  "coord": [100.0, 40.0],
  "value": [30, 19, 51]
}, {
  "name": "LATIN AMERICA",
  "coord": [-60.0, -15.0],
  "value": [15, 47, 38]
}, {
  "name": "MIDDLE EAST / AFRICA",
  "coord": [30.0, -5.0],
  "value": [21, 35, 44]
}];
const config = {
  title: false,
  credits: {
    visible: false
  },
  map: [{
    url: 'https://unpkg.com/realmap-collection/world-low.geo.json',
    exclude: ['ATA'],
    padding: '40 0 0 0'
  }],
  body: {
    projection: 'miller'
  },
  annotations: [{
    front: true,
    type: 'shape',
    shape: 'rectangle',
    offsetX: 20,
    offsetY: 20,
    width: 10,
    height: 28,
    style: {
      fill: '#333'
    }
  }, {
    front: true,
    // scope: 'body',
    type: 'text',
    text: '마인크래프트 지역별 플랫폼 점유율',
    offsetX: 40,
    offsetY: 20,
    height: 28,
    style: {
      fontSize: '15pt',
      fontWeight: 700
    }
  }, {
    front: true,
    type: 'image',
    height: 180,
    verticalAlign: 'bottom',
    offsetX: 50,
    offsetY: 120,
    imageUrl: 'https://www.realmap.co.kr/assets/images/minecraft/alex.png'
  }],
  legend: {
    location: 'body',
    offsetY: 100,
    align: 'center'
  },
  series: [{
    name: 'World',
    tooltipText: false,
    nullStyle: {
      fill: '#ddd',
      stroke: '#ddd'
    }
  }, {
    type: 'bar',
    width: 50,
    height: 120,
    barWidth: 0.9,
    categories: [{
      name: 'PC/Java Version',
      color: '#A4C76C'
    }, {
      name: 'Console',
      color: '#F7CB55'
    }, {
      name: 'Pocket Edition',
      color: '#A77C57'
    }],
    legendByCategory: true,
    pointLabel: {
      text: '${name}<br><t style="opacity:0.7">🖥️ ${value.0}%</t> <t style="opacity:0.7">🎮 ${value.1}%</t> <t style="opacity:0.7">📱 ${value.2}%</t>'
    },
    tooltipText: false,
    data,
    style: {
     ...