JSFiddle - React, Tailwind, and code Playground

by FiddleHeimer3000

HTML

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
<div id="leaflet"></div>
<div id="FontTest">33</div>

CSS

@import url(//fonts.googleapis.com/css?family=Do+Hyeon:400,700,300);
body {
    margin: 0;
}

html, body, #leaflet {
    margin: 0;
    height: 100%;
}
#FontTest {
  z-index:9999;
  position:fixed;
  top:0;
  right:0;
  font-family: 'Do Hyeon';
}

JavaScript

var map = new L.Map('leaflet', {
    center: [20, -80],
    zoom: 6,
    layers: [
        new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
        })
    ]
});
let svg = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 width="36" height="36" viewBox="0 0 36 36" style="enable-background:new 0 0 36 36;" xml:space="preserve"><style type="text/css">	.circle{fill:#EEEEEE;stroke:#990000;stroke-width:3;stroke-miterlimit:10;}	.count{font-family:"Do Hyeon";font-size:12px;}</style><g id="Layer_2_1_">	<g id="Layer_1-2">		<circle class="circle" cx="16" cy="16" r="14"/>	</g></g><text transform="matrix(1 0 0 1 10 20)" class="count">33</text></svg>';

let icon = L.icon({
        iconUrl: encodeURI("data:image/svg+xml," + svg).replace(new RegExp('#', 'g'),'%23'),
        
	});
let marker = new L.marker([20, -80],{
				icon: icon
			});
			marker.addTo(map);