JSFiddle - React, Tailwind, and code Playground

HTML

<body class='example-page'>

<div id="menu">
    here is the menu
</div>
    
<div id="content">
  <div class="page-main-image" >
  </div>
  <!--div with orange background -->
  <div id="orange-zone">  
  </div>
  <!-- comment box -->
  <div class="comment-box comment" style="opacity: 1;">
      xxx it's cool to comment<br/>
      nice one dude
   </div>
</div>
</body>

CSS

html {
	height:100%;
}

body.example-page {
	height:100%;
}

#menu {
    width= 100%;
    height=10%;
    background-color: green;
}

#content {
	height: 100%;
	margin-top: 18px;
	@media (max-width: 767px) {
	  	margin-top: 9px;
	}
}
.page-main-image {
	height: 100%;
    background: url('http://www.thedrum.com/uploads/drum_basic_article/115509/main_images/BBCb.jpg'); background-size: cover; background-repeat: no-repeat;
}

#orange-zone {
	position:fixed;
	top:10%; 
	left:30%;
	width:100%;
	height:100%; 
    background-color:orange;
}
.treasure{
  position: absolute;
}

.comment-box {
  position:relative;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 10px;
  bottom:5%;
  right:5%;
}
.comment {
  position:absolute;  
}