JSFiddle - React, Tailwind, and code Playground

by jafrancom01

HTML

<input id="parar" value="parar todo" type="button"/>
    <div id="divmov">
        <input id="botonarriba" value="arriba" type="button"/>
        <input id="botonizquierda" value="izquierda" type="button"/>
        <input id="botonderecha" value="derecha" type="button"/>    
        <input id="botonabajo" value="abajo" type="button"/>
      </div>

CSS

#divmov{
            border: 1px solid blue;
            position: absolute;
            width: 150px;
            height: 100px;
            top: 5%;
            right: 0%;
            bottom: 0%;
            left: 5%;
            background-color: #CEECF5;
        }
         #botonarriba{
            position: fixed;
            margin-left: 7%;
            
        }
        
          #botonderecha{
            position: fixed;
            margin-top: 4.8%;
            margin-left: 10.7%;
        }
        
        #botonizquierda{
            position: fixed;
            margin-top: 4.8%;
        }
        
       #botonabajo{
            position: fixed ;
            margin-top: 10%;
             margin-left: 7%;
        }

JavaScript

var horizontal=5;
        var vertical=5;
        
        var intervalDerecha = "";
        var intervalIzquierda = "";
        var intervalArriba = "";
        var intervalAbajo = "";
        
        function marriba() {

            if (document.getElementById("divmov").style.top!="4%") {
                vertical--;
                document.getElementById("divmov").style.top = vertical + "%";
            } else {alert("No se puede mover mas arriba");}
       }
       
       
        function mabajo() {

            if (document.getElementById("divmov").style.top!="90%") {
                vertical++;
                document.getElementById("divmov").style.top = vertical + "%";
            } else {alert("No se puede mover mas abajo");}
        }
        
        
        
         function mizquierda() {
            
            if (document.getElementById("divmov").style.left!="4%") {
                horizontal--;
                document.getElementById("divmov").style.left = horizontal + "%";
            } else {alert("No se puede mover mas a la izquierda");}
        }
        
         function mderecha() {

            if (document.getElementById("divmov").style.left!="90%") {
                horizontal++;
                document.getElementById("divmov").style.left = horizontal + "%";
            } else { alert("No se puede mover mas a la derecha");}
        }
        
        
        
        
        document.getElementById("parar").onclick = function() {
            if(intervalDerecha!=""){clearInterval(intervalDerecha);}
            if(intervalIzquierda!=""){clearInterval(intervalIzquierda);}
            if(intervalArriba!=""){clearInterval(intervalArriba);}
            if(intervalAbajo!=""){clearInterval(intervalAbajo);}
        }
       
        document.getElementById("botonderecha").onclick = function() {
            intervalDerecha = setInterval(mderecha,1000);
        }

        document.getElementById("botonizquierda").onclick = function() {
 ...