JSFiddle - React, Tailwind, and code Playground

by iiAtlas

HTML

<div id="moveme"></div>
<div id="controls">
    <input id="topIn" type="text">Top<br />
    <input id="leftIn" type="text">Left
</div>

CSS

#moveme {
    position: absolute;
    
    left: 10px;
    top: 100px;
    width: 150px;
    height: 100px;
    background: red;
    
    transition-property: left, top;
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

#controls {
    position: absolute;
    margin-top: 10px;
}

JavaScript

$(document).ready(function() {
    $("#moveme").click(function() {
        leftVal = $("#leftIn").val() + "px";
        topVal = $("#topIn").val() + "px";
        
        $(this).css("left", leftVal);
        $(this).css("top", topVal);
    });   
});