JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/css/anychart-ui.min.css">
<link rel="stylesheet" href="https://cdn.anychart.com/releases/8.0.1/fonts/css/anychart-font.min.css">
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-base.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-ui.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-exports.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-map.min.js"></script>
<script src="https://cdn.anychart.com/releases/8.0.1/js/anychart-data-adapter.min.js"></script>
<script src="https://cdn.anychart.com/geodata/1.2.0/custom/world/world.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js"></script>
<div id="container"></div>

CSS

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

anychart.onDocumentReady(function () {
    // The data used in this sample can be obtained from the CDN
    // https://cdn.anychart.com/samples-data/maps-general-features/world-choropleth-map/data.json
    anychart.data.loadJsonFile('https://cdn.anychart.com/samples-data/maps-general-features/world-choropleth-map/data.json', function (data) {
        var map = anychart.map();

        map.credits()
                .enabled(true)
                .url('https://en.wikipedia.org/wiki/List_of_sovereign_states_and_dependent_territories_by_population_density')
                .logoSrc('https://en.wikipedia.org/static/favicon/wikipedia.ico')
                .text('Data source: https://en.wikipedia.org/wiki/List_of_sovereign_states_and_dependent_territories_by_population_density');

        map.title()
                .enabled(true)
                .useHtml(true)
                .padding([10, 0, 10, 0])
                .text('Population Density (people per km&#178)<br/>' +
                        '<span  style="color:#929292; font-size: 12px;">(Data source: Wikipedia, 2015)</span>');

        map.geoData('anychart.maps.world');
        map.interactivity().selectionMode('none');
        map.padding(0);

        var dataSet = anychart.data.set(data);
        var density_data = dataSet.mapAs({'value': 'density'});
        var series = map.choropleth(density_data);

        series.labels(false);

        series.hovered()
                .fill('#f48fb1')
                .stroke(anychart.color.darken('#f48fb1'));

        series.selected()
                .fill('#c2185b')
                .stroke(anychart.color.darken('#c2185b'));

        series.tooltip()
                .useHtml(true)
                .format(function () {
                    return '<span style="color: #d9d9d9">Density</span>: ' +
                            parseFloat(this.value).toLocaleString() + ' pop./km&#178 <br/>' +
                            '<span style="color: #d9d9d9">Population</span>: ' +
       ...