JSFiddle - React, Tailwind, and code Playground

Babel + JSX

import React from "react";



class Main extends React.Component {
	constructor(props){
		super(props);
		let deltaX;
		let deltaY;
		this.state = {
			divStyle: {
				width:"1000px",
				height: "500px",
				outline: "1px solid red",
				position:"relative"
			},
			move: {
				width:"200px",
				height:"100px",
				outline: "1px solid green",
				position:"absolute"

			}
		}

	}

		getMouse(e){
           console.log(this.ourdiv.style);

        }


		MouseDown(e){
				var mousePosX = e.pageX;
                var mousePosY = e.pageY;
                console.log(this.ourdiv.style);
                var divPosX = this.ourdiv.offsetLeft;
                var divPosY = this.ourdiv.offsetTop;
                this.deltaX = mousePosX - divPosX;
                this.deltaY = mousePosY - divPosY;
                window.addEventListener("mousemove", this.getMouse);
                this.ourdiv.onmouseup = function() {
                    window.removeEventListener("mousemove", this.getMouse);
                }
		}
	

	render() {

		return(	
			<div>
				<div style={this.state.divStyle}>
					<div style={this.state.move} ref={(ourdiv) => this.ourdiv = ourdiv} onMouseDown ={this.MouseDown.bind(this)}></div>
				</div>
			</div>
			)

	}
}



export default Main;