JSFiddle - React, Tailwind, and code Playground

HTML

<div class="window">
  <div class="titlebar">Hello, World!</div>
  <div class="content">
    <p>Window <b>Content!</b></p>
  </div>
</div>

CSS

body { background:#eee }
.window {
    position:absolute;
    top:20px; left:30px; width:200px; height:150px;
    border:1px solid #ddd;
    background:#fff;
    box-shadow:3px 3px 10px rgba(0,0,0,0.2);
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
}
.window .titlebar { background:#ddd; text-align:center; cursor:move; border-bottom:1px solid #ccc }
.window .content { padding:1em }

JavaScript

// For each item with a `window` class…
var windows = document.querySelectorAll('.window');
[].forEach.call(windows,function(win){

  // …find the title bar inside it and do something onmousedown
  var title = win.querySelector('.titlebar');
  title.addEventListener('mousedown',function(evt){

    // Record where the window started
    var real = window.getComputedStyle(win),
        winX = parseFloat(real.left),
        winY = parseFloat(real.top);

    // Record where the mouse started
    var mX = evt.clientX,
        mY = evt.clientY;

    // When moving anywhere on the page, drag the window
    // …until the mouse button comes up
    document.body.addEventListener('mousemove',drag,false);
    document.body.addEventListener('mouseup',function(){
      document.body.removeEventListener('mousemove',drag,false);
    },false);

    // Every time the mouse moves, we do the following 
    function drag(evt){
      // Add difference between where the mouse is now
      // versus where it was last to the original positions
      win.style.left = winX + evt.clientX-mX + 'px';
      win.style.top  = winY + evt.clientY-mY + 'px';
    };
  },false);
});