JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>OpenStreetMap with Google Maps v3 API</title>
        <style type="text/css">
            html, body, #map {
                height: 100%;
                margin: 0;
                padding: 0;

            }

#map {
                height: 100%;
                margin: 0;
                padding: 0;
z-index: 1;    
            }

body:before {
           content: "";
           position: fixed;
           top: -10px;
           left: 0;
           width: 100%;
          height: 10px;

           -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
               -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
                 box-shadow: 0px 0px 10px rgba(0,0,0,.8);

           z-index: 100;
}

.content{
    z-index: 100;
     background-color: black;
color: white;
padding: 20px;
    position: absolute; top: 100px; left: 50%;
     width: 900px;
     height: auto;
     margin: auto;
margin-left: -470px; /* half the value of the width AND padding */
     }
    
        </style>
    </head>
    <body>
        <div id="map"></div>
 
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">
            var element = document.getElementById("map");
 
            /*
Build list of map types.
You can also use var mapTypeIds = ["roadmap", "satellite", "hybrid", "terrain", "OSM"]
but static lists sucks when google updates the default list of map types.
*/
            var mapTypeIds = [];
            for(var type in google.maps.MapTypeId) {
                mapTypeIds.push(google.maps.MapTypeId[type]);
            }
            mapTypeIds.push("OSM");
 
            var map = new google.maps.Map(element, {
                center: new...