JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Run it in chrome</title>
<style>
body {
    background-color: #ddd;
    margin: 0;
    padding: 0;
}

#x {
    position:absolute;
    width:110px;
    height:110px;
    background-color: #990000;
    color:white;
}

.pos_random{
    left:0;
    top:200px;
}


.pos_zero{
    left:0;
    top:0;
}

.pos_end{
    left:200px;
    top:200px;
}

.trans {
    -webkit-transition:all 1s ease-in-out;
}


</style>
<script type="text/javascript">

/**
 Transition starts too early, while css style hasn't applied completely.
 */
var $ = function (id) {return document.getElementById(id)};

// move to position end(200,200) by transition
var move = function(){
    $('x').className = ' trans';
    $('x').className += ' pos_end' ;
}

window.onload = function(){
    $('x').className = 'pos_random'; // set the div to a random position.
    
    $('This_is_not_what_I_want').addEventListener("click", function(){
        $('x').className = 'pos_zero';    // set the div to the position zero(0,0)
        move(); // It moves from position random(0,0) to end(200,200), which is not exactly what I want.
    },false);    
    
    $('move_from_zero_to_end').addEventListener("click", function(){
        $('x').className = 'pos_zero';    // set the div to the position zero(0,0)    
        setTimeout('move()',1); //It moves from position zero(0,0) to end(200,200), but it seems asynchronous .
    },false);
    
};
</script>
</head>
<body>
<div id='x'>
position:<br>
zero(0,0)<br>
end(200,200)<br>
random(0,200)
</div>
<div style="position:absolute;bottom:0;background-color: #369d96;width:100%">
<button id='This_is_not_what_I_want'>This_is_not_what_I_want</button>
<button id='move_from_zero_to_end'>move_from_zero_to_end</button>
</div>

</body>
</html>