JSFiddle - React, Tailwind, and code Playground

HTML

<div class = "map-section"> 

   <div class = "map-holder"> 
       <div class = "map-floater"> </div>
<iframe src="http://www.northerntechnomics.com/lmantzel/googlemap/maptest12.html#" width= "100%" height = "380px" frameborder="0"/>
        </div>
    
   
</div>

CSS

body {
    height: 100%;
}
.map-section {
    height: 280px;
    position: relative;
}
.map-holder {
    height: 380px;
    width: 100%;
    position: absolute;
    top: -100px;
    z-index: 0;
}
.map-floater {
    position: absolute;
    z-index: 3;
    height: 380px;
    width: 100%;
    background: #555;
    opacity:.5
}