JSFiddle - React, Tailwind, and code Playground

by parksd

HTML

<body>
  <div id="popover">

  </div>
  <div id="frame">

  </div>

  <button id="but">
  but
  </button>
</body>

CSS

html,
body {
  width: 100%;
  height: 100%;
}

#frame {
  top: 50px;
  left: 20px;
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: blue;
}

#popover {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 50px;
  left: 20px;
  background-color: red;
}

JavaScript

document.querySelector("#but").addEventListener("click", function(){
	let popover = document.querySelector("#popover");
  let fame = document.querySelector("#frame");
  frame.appendChild(popover);  
});