JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="player"></div>
<br>
<input id="tryme" type="button" value="open popup"/>

<div id="previewSchema">
<div class="desktop">
    <div class="parent">
        <div class="page"></div>
    </div>
    <div class="popup"></div>
</div>
<p>Schema scale : 1/5</p>
<p>Info :</p>
<ul>
    <li class="desktop">desktop</li>
    <li class="parent">Code editor - jsfiddle.net</li>
    <li class="page">current page</li>
    <li class="popup">popup</li>
</ul>
</div>
<p class="info"></p>

SCSS

body {
    margin:0;
    padding:0;
}
#previewSchema {
    border-top:1px black solid;
    position:relative;
    
    div.desktop { background-color:Teal; }
    div.parent { background-color:Olive; }
    div.page { background-color:Purple; }
    div.popup { background-color:Orange; }
    
    div.desktop div {
        position:absolute;
    }
    
    div.page {
        font-size:50px;
        text-align:center;
    }
    
    p {
        margin:0;
    }

    ul {
        margin:0;
        list-style:square inside;
        li.desktop { color:Teal; }
        li.parent { color:Olive; }
        li.page { color:Purple; }
        li.popup { color:Orange; }
    }
}

JavaScript

window.currentChild = false;

$("#tryme").click(function() {
  if (currentChild) currentChild.close();
  const child = window.open("about:blank","child",'width=300,height=300');
  currentChild = child;

  $(child.document).find("body").append("my Popup");
  
  //Scrope script in child windows
  child.frames.eval(`
  setInterval(function () {
      // I'm your child, don't forget me
      if (!window.opener.currentChild)
      	window.opener.currentChild = window;
  }, 500);
  `);
  /*child.frames.eval(`
  const $ = window.opener.$;
  setInterval(function () {
  	  let $p = $(document.body).find("p");
  	  if (!$p[0])
    	  $("<p></p>").text("0").appendTo(document.body);
      $p.text((+$p.text()) + 1);
  }, 500);
  `);*/
});

function pin(state) {
	return (state ? "✔️": "❌");
}


function intersectRect(a, b) {
  return (a.left <= b.right &&
          b.left <= a.right &&
          a.top <= b.bottom &&
          b.top <= a.bottom);
}

// minipreview
 setInterval(function () {
 	const $desktop = $("#previewSchema div.desktop"),
 		$parent = $("#previewSchema div.parent"),
 		$page = $("#previewSchema div.page"),
 		$popup = $("#previewSchema div.popup");
   
    let bool = document.hasFocus();
    
    $("p.info").text("in");
    console.log(outerWidth + screenX)
    if (screen.width < outerWidth + screenX) {
        bool = false;
    	$("p.info").text("right side: out");
    } else if ((outerWidth - innerWidth) + screenX < 0) {
        bool = false;
    	$("p.info").text("left side: out");
    } else if (screen.height < outerHeight + screenY) {
        bool = false;
    	$("p.info").text("bottom side: out");
    } else if ((outerHeight - innerHeight) + screenY < 0) {
        bool = false;
    	$("p.info").text("top side: out");
    }
  
    if (currentChild && !currentChild.closed) {  
        let rectPage = {
            left:   (outerWidth - innerWidth) + screenX,
            top:    (outerHeight - innerHeight) + screenY,
            right:  outerWidth +...