JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div class="map-container">
    <div class="map" id="map"></div>
</div>

CSS

.map-container {
    position: relative;
    overflow: hidden;
    width: 500px;
    height: 400px;
}
.map-container:before, .map-container:after, .map:before, .map:after {
    position: absolute;
    display: block;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    content: '';
    z-index: 5;
}
.map-container:before {
    top: -5px;
    left: 0;
    right: 0;
    height: 5px;
}
.map-container:after {
    right: -5px;
    top: 0;
    bottom: 0;
    width: 5px;
}
.map:before{
    bottom: -5px;
    left: 0;
    right: 0;
    height: 5px;
}
.map:after{
    left: -5px;
    top: 0;
    bottom: 0;
    width: 5px;
}
#map {
    width: inherit;
    height: inherit;
}

JavaScript

new google.maps.Map(document.getElementById("map"), {
    zoom: 10,
    center: new google.maps.LatLng(59.91916, 30.32910),
    mapTypeId: "roadmap"
});