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>
    <i class="map-top"></i>
    <i class="map-right"></i>
    <i class="map-bottom"></i>
    <i class="map-left"></i>
</div>

CSS

.map-container {
    position: relative;
    overflow: hidden;
    width: 500px;
    height: 400px;
}
.map-container i {
    position: absolute;
    display: block;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}
.map-top {
    top: -5px;
    left: 0;
    right: 0;
    height: 5px;
}
.map-right {
    right: -5px;
    top: 0;
    bottom: 0;
    width: 5px;
}
.map-bottom {
    bottom: -5px;
    left: 0;
    right: 0;
    height: 5px;
}
.map-left {
    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"
});