JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<header>
    Some fuckin content
</header>
<i id="mapid"></i>

CSS

* {
    margin: 0;
    padding: 0;
}
html, body {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

header {
    position: absolute;
    background: #fff;
    z-index: 100;
    top: 0px; left: 0px;
    width: 100%;
    padding: 20px;
    box-shadow: 0px 0px 3px 0px #000;
}

#mapid {
    display: block;
    width: 160%;
    height: 50%;
    margin: 0 0 0 -30%;
    background: #000;
}

JavaScript

// init coordinates
 var coords = new google.maps.LatLng(54.321767, 48.401789);

 // set styles
 var styleOpt = [{
     "featureType": "all",
         "stylers": [{
         "saturation": 31
     }, {
         "lightness": 5
     }, {
         "gamma": 0.76
     }]
 }, {
     "featureType": "water",
         "stylers": [{
         "color": "#87d6f5"
     }, {
         "visibility": "on"
     }]
 }];

 // set options
 var options = {
     zoom: 16,
     center: coords,
     mapTypeId: google.maps.MapTypeId.ROADMAP
 };

 // init map
 var $map = $('#mapid')[0];
 var styledMap = new google.maps.StyledMapType(styleOpt, {
     name: "Styled Map"
 });
 var map = new google.maps.Map($map, options);

 // stylish map
 map.mapTypes.set('map_style', styledMap);
 map.setMapTypeId('map_style');