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>RealMap - Image Series</title>
<style>
html {
	margin: 0px;
}
body {
	margin: 20px 30px;
}
#realmap {
	width: 950px;
	height: 650px;
    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 config = {
  options: {
    theme: ''
  },
  title: false,
  credits: false,
  map: [{
    url: 'https://unpkg.com/realmap-collection/kr-sido-low.geo.json',
    showDummies: true,
    padding: '0.8 0 0 0',
    insets: [RealMap.preset('울릉도', {
      frame: undefined
    })],
    dokdo: 0.1
  }],
  body: {
    projection: 'miller',
    zoomable: true,
    style: {
      fill: '#fff'
    }
  },
  legend: false,
  annotations: [{
    front: true,
    type: 'shape',
    shape: 'rectangle',
    offsetX: 20,
    offsetY: 20,
    width: 10,
    height: 28,
    style: {
      fill: '#939393'
    }
  }, {
    front: true,
    // scope: 'body',
    type: 'text',
    text: '시도별 심플 로고',
    offsetX: 40,
    offsetY: 20,
    style: {
      fontSize: '15pt',
      fontWeight: 700
    }
  }],
  series: [{
    tooltipText: '${id}',
    mapKeys: ['name', 'id'],
    colorField: 'color',
    style: {
      stroke: '#fff'
    },
    // hoverColor: '#E3E3E3',
    hoverStyle: {
      filter: 'brightness(1.05)'
    },
    data: [{
      id: '서울특별시',
      color: '#C4DEED'
    }, {
      id: '경기도',
      color: '#CCE2CF'
    }, {
      id: '강원특별자치도',
      color: '#F2C7CE'
    }, {
      id: '인천광역시',
      color: '#C4E4E2'
    }, {
      id: '충청남도',
      color: '#E7D2E4'
    }, {
      id: '충청북도',
      color: '#DBD2E2'
    }, {
      id: '세종특별자치시',
      color: '#C4E4EC'
    }, {
      id: '대전광역시',
      color: '#C9CDDD'
    }, {
      id: '전북특별자치도',
      color: '#C5DCE0'
    }, {
      id: '광주광역시',
      color: '#F2CFC7'
    }, {
      id: '전라남도',
      color: '#F5DBCA'
    }, {
      id: '경상남도',
      color: '#F5E6C4'
    }, {
      id: '경상북도',
      color: '#C4D9E8'
    }, {
      id: '부산광역시',
      color: '#F2C4DD'
    }, {
      id: '대구광역시',
      color: '#C4DFCF'
    }, {
      id: '울산광역시',
      color: '#C4E4E8'
    }, {
      id: '제주특별자치도',
      color: '#F5DECE'
    }]
  }, {
    type: 'image',
    imageWidth: 48,
    imageHeight: 48,
    style: {
      opacity: 1
   ...