JSFiddle - React, Tailwind, and code Playground

HTML

<button data-new>New</button>

CSS

.window {position: absolute;width: 400px;border: 2px solid;}
.window>:first-child {height: 35px;background: #ccc;}
.window>:last-child {height: 235px;background: #fff;}

JavaScript

document.querySelector("[data-new]").addEventListener("click", function (){
	
	var vindow = document.createElement("div"),
		  header = document.createElement("div"),
	  	body   = document.createElement("div");

	vindow.className    = "window";
	vindow.style.zIndex = "100";

	header.addEventListener("mousedown", drag.init, false);

	vindow.appendChild(header);
	vindow.appendChild(body);

	document.body.appendChild(vindow);

}, false);

var drag = {
		init: function (e){

			e.preventDefault();

			drag.element = e.target.parentNode;

			document.querySelectorAll(".window").forEach(function (v){
				v.style.zIndex = "0";
			});

			drag.element.style.zIndex = "10";
			
			drag.x = e.clientX;
			drag.y = e.clientY;

			drag.top  = drag.element.offsetTop;
			drag.left = drag.element.offsetLeft;

			document.addEventListener("mousemove", drag.refresh, false);
			document.addEventListener("mouseup", drag.end, false);

		},
		refresh: function (e){
			drag.element.style.top  = drag.top  + (e.clientY - drag.y) + "px";
			drag.element.style.left = drag.left + (e.clientX - drag.x) + "px";
		},
		end: function (){
			document.removeEventListener("mousemove", drag.refresh, false);
			document.removeEventListener("mouseup", drag.end, false);
		}
	};