JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
   <head>
       <title>Map with no credentials</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
       <script src="http://code.jquery.com/jquery-1.8.0.js" type="text/javascript"></script>
       <script charset="UTF-8" type="text/javascript" src="https://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&s=1"></script>
       <script type="text/javascript">
           var map = null;
           var count = 0;
           
           function getMap() {
               map = new Microsoft.Maps.Map(document.getElementById('myMap'), null);

               window.Microsoft.Maps.Events.addHandler(map, 'click', function (e) {
                   if (e.targetType == "map") {
                       count++;
                       document.getElementById("divCounter").innerHTML = count;
                   }
               });
           }
       </script>
       <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
   </head>
    <body onload="getMap();">
        <div id='divCounter' style="background:yellow">Test</div>
        <div id='myMap' style="position:relative; width:1400px; height:800px;"></div>
    </body>
</html>