JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.6/d3.js"></script>
<div></div>

JavaScript

var svg = d3.selectAll('div').append('svg').attr({
    height:500,
    width: 500
});

var box = svg.append('rect').attr({
    x: 20,
    y: 20,
    height:50,
    width:50,
    fill: 'blue'
});

box.on('click',function(){
    
    var cornerBox = svg.append('rect').attr({
        x:15,
        y:15,
        width:10,
        height:10,
        fill:'orange'
    });
    
    cornerBox.transition().attr({
        x: 50+15
    }).duration(150).transition().attr({
        y: 50+15
    }).transition().attr({
        x:15
    }).duration(150).transition().attr({
        y:15
    }).duration(150);
});