JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="content1"></div>
    <iframe id="iframe" src="http://fender.com"></iframe>
    <div class="iframeHat"></div>
    <div id="content2"></div>
</body>

CSS

body {
    margin:0;
    width:100%;
    height:100%;
}
#content1 {
    width:100%;
    height:150px;
    background-color:red;
    border-top:2px solid black;
    margin-bottom:5px;
}
#iframe, .iframeHat {
    width:300px;
    height:300px;
    margin-left:50px;
    border:none;
}
.iframeHat {
    margin-top:-304px;
    background-color:rgba(10,100,0,0.5);
    position:relative;
    z-index:999;
}
#content2 {
    width:100%;
    height:150px;
    background-color:blue;
    border-bottom:2px solid black;
    margin-top:5px;
}