JSFiddle - React, Tailwind, and code Playground

HTML

<script>
function iframeLoad(iframe){
    var iDoc = iframe.contentDocument;
   
    iDoc.body.className = 'iframe1';
    iDoc.body.innerHTML = 'Some Text Here<br>More Text Below';
    iDoc.head.appendChild(document.createElement('style'));
}
    </script>


<body class="main">
	<div class="two">
		<iframe seamless="seamless" onload="iframeLoad(this)"></iframe>
	</div>
	<div class='drag'></div>
	<div class='overlay'></div>
</html>

CSS

body.main{
  position: absolute;
  height: 100%;
  width: 100%;
  margin: 0px;

  overflow: hidden;
  /* font-size: 22vmin; */
}
.main div{
  position:absolute;  

  width: 40%;
  height: 8%;
  font-size: 11.7vmax;
  white-space: nowrap;
  background: rgb(172, 172, 214);
  color:red;
  
}

.main div.two{
top: 10%;
left: 10%;
background: rgba(111, 105, 172, 0.15);
/* transition:1s; */
z-index: 0;
}
.main iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(3.5 * 100%);
  background: rgba(0,0,0,0);
  border-style: none;
  transform: translate3d(-50%,-50%,0);
}
body.iframe1{
    position: absolute;            
    top: 50%;
    left: 50%;
    max-height: none;   
    font-size: 14.1vmin;   white-space: nowrap;   
    background: rgba(172, 172, 214, 0);   color: red;

    overflow: hidden;
    margin: 0px;
    transform: translate3d(-50%,-50%,0);
}
input{
  z-index:2;
}

div.drag{
  position:absolute;
  width:20px;
  height:20px;
  background:red;
  left: 50%;
  top: 18%;
  z-index:2
}
div.overlay{
  position:absolute;
  top:0px;
  left:0px;
  height:100%;
  width:100%;
  z-index:1;
  background:rgba(0,0,0,0);
}

JavaScript

var dragDiv = document.querySelector('.drag');
var mainDiv = document.querySelector('.two');
var top = mainDiv.offsetTop;
var left = mainDiv.offsetLeft;
dragDiv.addEventListener('mousedown',dragDown,false);
var startX, startY;
var startXmini, startYmini;
var startH, startW;
var dragActivated = false;
function dragDown(){
	if(dragActivated===false){
		dragActivated=true;
	document.body.addEventListener('mousemove',dragMove,false);
	startX = event.x;
	startY = event.y;
	startH = mainDiv.offsetHeight;
	startW = mainDiv.offsetWidth;
	startL = dragDiv.offsetLeft;
	startT = dragDiv.offsetTop;
	}else{
		document.body.removeEventListener('mousemove',dragMove,false);
		dragActivated = false;
	}
}
function dragMove(){
	var ev = event;
	var dx = ev.x-startX;
	var dy = ev.y-startY;

	mainDiv.style.width = startW + dx + 'px';
	mainDiv.style.height = startH + dy + 'px';
	dragDiv.style.left = startL + dx + 'px'; 
	dragDiv.style.top = startT+ dy + 'px';

};
var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText);