JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML>
<html lang="sv">

<head>
    <meta charset="utf-8" />
    <meta name="description" content="modul 3 - övning 9" />
    <meta name="author" content="Sebastian Andersson" />
    <title>Sebastian Andersson</title>
    <script>
        
        var $hubbe = {};

        $hubbe.printelement = function() {
           
            $hubbe.div = document.createElement("DIV");
         
            $hubbe.div.setAttribute("id", "newdiv");
            $hubbe.div.setAttribute("style", "background-color:red;")
            $hubbe.div.innerHTML = "hej";
            $hubbe.div.style.position = "absolute";
            $hubbe.div.style.left = "50%";
            $hubbe.div.style.top = "50%";
            
            document.body.appendChild($hubbe.div);
            $hubbe.move();
        }

        $hubbe.movex = 0;
        $hubbe.newdiv = document.getElementById("newdiv");
        $hubbe.translateX = 1;
        $hubbe.translateY = 0;
				$hubbe.move = function() {
        				var element = $hubbe.div;
                var translateX = $hubbe.translateX;
                var translateY = $hubbe.translateY;
								// https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
                // This method basically gives us the position of all four sides of the "element" on which it is call. It gives us the size as well.
                // In the current case we only require the 'current position' 
                // of our div so we call it over our div and the resultant
                // variable 'pos' would contain the  respective position of 
                // each side left / right / top / bottom in it e.g pos.left etc.
                // This is needed because we need to keep track of where our div
                // currently is, since the translation is based on certain 
                // conditions e.g if the div reaches the right edge off the 
                // screen, it should start moving left etc.
        				var pos =...