JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <script type='text/javascript' src='http://www.ericmmartin.com/wordpress/wp-content/plugins/simplemodal-login/js/jquery.simplemodal.js?ver=1.4.2'></script>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
            
        </script>
        <script type="text/javascript">
            function initialize() {

                var mapOptions = {
                    center: new google.maps.LatLng(-34.397, 150.644),
                    zoom: 8,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };
                var map = new google.maps.Map(document.getElementById("map_canvas"),
                mapOptions);
                google.maps.event.trigger(map, 'resize');
            }
        </script>
    </head>
    <div id='basic-modal'><a href="#" class='basic-maps'>Open Modal</a>
    </div>
    <div id="content-maps">
        
        <body onload="initialize()">
            <div id="map_canvas" style="width:400px; height:300px"></div>
        </body>
    </div>

</html>

CSS

#content-maps {
    display:none;
}
/* Overlay */
 #simplemodal-overlay {
    background-color:#2e2e2e;
}
/* Container */
 #simplemodal-container {
    border-top: 3px solid #85BC77;
    #map_canvas {
        height: 100%
    }

JavaScript

jQuery(function ($) {
    // Load dialog on click
    $('.basic-maps').click(function (e) {

        $("#content-maps").modal({
            overlayClose: true,
            opacity: 45,
            position: [98],
            onOpen: function (dialog) {
                dialog.overlay.fadeIn(200, function () {
                    dialog.data.show();
                    dialog.container.fadeIn(200);
                });
            },
            onClose: function (dialog) {
                $.modal.close();
            }
        });


    });
});