JSFiddle - React, Tailwind, and code Playground

HTML

<section class="section2" style="height:100vh;">
	<div class="row">
		<div class="col-md-10 col-md-offset-1">
			<div class="the-container">
				<div class="img-canvas"></div>
				<div class="window"></div>
			</div>
		</div>
	</div>
</section>

CSS

.section2{
}

.section2 .row{
  margin: 0;
}
.the-container{
  position: relative;
  width: 100%;
  height: 450px;
}
.the-container .text-center{
    background: #fff;
    opacity: .9;
}
.window,
.img-canvas{
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    width: 100%;
    height: 100%;
    background-image: url(https://www.aman.com/sites/default/files/styles/1371x706/public/amanpulo-location-1200-x-825.jpg?itok=4BQy9j-X);
    z-index: -1;
	background-size: 100% 100%;
	background-position: 50% 50%;
	background-attachment:fixed;
	opacity: 0.5;
}
.window{
  position:absolute;
  width:50%;
  height:50%;
  top:0;
  left:25%;
  z-index: -1;
  opacity: 1;
}