JSFiddle - React, Tailwind, and code Playground

HTML

<h1>Title</h1>

CSS

h1 {
  background-color:yellow;
}

JavaScript

let ele = document.getElementsByTagName('h1')[0],
    startX,
    startY,
    translateX = 0,
    translateY = 0,
    moving = false;

ele.style.display = 'inline-block';


ele.addEventListener('mousedown', evt => {
    evt.preventDefault();
    moving = true;
    startX = evt.pageX - translateX;
    startY = evt.pageY - translateY;
});


window.addEventListener('mousemove', evt => {
    if (moving){
        translateX = evt.pageX - startX;
        translateY = evt.pageY - startY;
        if (translateX + ele.offsetLeft < 0){
            translateX = -ele.offsetLeft;
        } else if (translateX > window.innerWidth - ele.offsetWidth - ele.offsetLeft){
            translateX = window.innerWidth - ele.offsetWidth - ele.offsetLeft;
        }

        if (translateY + ele.offsetTop < 0){
            translateY = -ele.offsetTop;
        } else if (translateY > window.innerHeight - ele.offsetHeight - ele.offsetTop){
            translateY = window.innerHeight - ele.offsetHeight - ele.offsetTop;
        }
        ele.style.transform = `translateX(${translateX}px) translateY(${translateY}px)`;
    }
});

window.addEventListener('mouseup', evt => {
    evt.preventDefault();
    moving = false;
});