JSFiddle - React, Tailwind, and code Playground

HTML

<div id="controls0">
    <div id="c0_0">Control :
        <input id="i1" data-el="#block1" type="radio" name="item" checked="checked"><label  id="L1" for="i1">Green</label>
        <input id="i2" data-el="#block2" type="radio" name="item"><label id="L2" for="i2">Red</label>
    </div>
    <div id="c0_1">
        <input class="stop" type="button" data-el="#block1" value="Stop Green" />
        <input class="stop" type="button" data-el="#block2" value="Stop Red" /> 
    </div>
</div>


<div id="canvas">
    <div id="controls2">
        <div id="b_top" class="top half_right" data-name="top"></div>
        <div id="b_right" class="half_bottom right" data-name="right"></div>
        <div id="b_bottom" class="bottom half_right" data-name="bottom"></div>
        <div id="b_left" class="half_bottom left" data-name="left"></div>
        <div id="b_top_left" class="top left" data-name="top_left"></div>
        <div id="b_top_right" class="top right" data-name="top_right"></div>
        <div id="b_bottom_right" class="bottom right" data-name="bottom_right"></div>
        <div id="b_bottom_left" class="bottom left" data-name="bottom_left"></div>
    </div>
    <div id="pallette">
        <div id="block1"></div>
        <div id="block2"></div>
    </div>
</div>

CSS

body {
    margin:10px;
}
#c0_0 input {
    margin: 0 5px;
}
#c0_1 input {
    padding: 0 5px;
}
#L1 {
    color: green;
}
#L2 {
    color: red;
}
#controls2 div {
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #999;
}
#canvas {
    position: relative;
    left: 30px;
    top: 30px; 
}
#pallette {
    position: absolute;
    width: 250px;
    height: 150px;
    border: 1px solid #000;
    background-color: #f0f0f0;
}
#block1, #block2 {
    position: absolute;
    border: 1px solid #000;
}
#block1 {
    background-color: green;
}
#block2 {
    background-color: red;
}

JavaScript

//First establish  bunch of data, mostly to do with element sizes and absolute positions
var $pallette = $("#pallette"),
    dims = {
        controls: {
            width: 20,
            height: 20
        },
        blocks: {
            width: 30,
            height: 30
        }
    },
    pos = {
        controls: {
            top: -dims.controls.height + 'px',
            right: ($pallette.width() + 2) + 'px',
            bottom: ($pallette.height() + 2) + 'px',
            left: -dims.controls.width + 'px',
            half_right: ($pallette.width() / 2 - dims.controls.width / 2) + 'px',
            half_bottom: ($pallette.height() / 2 - dims.controls.height / 2) + 'px'
        },
        blocks: {
            top: 0,
            right: ($pallette.width() - dims.blocks.width - 2) + 'px',
            bottom: ($pallette.height() - dims.blocks.height - 2) + 'px',
            left: 0,
            half_right: ($pallette.width() / 2 - dims.blocks.width / 2 - 2) + 'px',
            half_bottom: ($pallette.height() / 2 - dims.blocks.height / 2 - 2) + 'px'
        }
    },
    animations = {
        top: {
            left: pos.blocks.half_right,
            top: pos.blocks.top
        },
        right: {
            left: pos.blocks.right,
            top: pos.blocks.half_bottom
        },
        bottom: {
            left: pos.blocks.half_right,
            top: pos.blocks.bottom
        },
        left: {
            left: pos.blocks.left,
            top: pos.blocks.half_bottom
        },
        top_left: {
            top: pos.blocks.top,
            left: pos.blocks.left
        },
        top_right: {
            top: pos.blocks.top,
            left: pos.blocks.right
        },
        bottom_right: {
            top: pos.blocks.bottom,
            left: pos.blocks.right
        },
        bottom_left: {
            top: pos.blocks.bottom,
            left: pos.blocks.left
        },
        center: {
            top: pos.blocks.half_bottom,
           ...