JSFiddle - React, Tailwind, and code Playground

by Deriv Diggs

HTML

<body>
    <div class="box">
    </div>
    <div class="anotherbox">
    </div>
</body>

CSS

body {
	padding: 0;
  	margin: 0;
}

.box {
    top:0px;
	width:100px;
	height:100px;
    position:absolute;
	background-color:#08F;
	-webkit-transition : all .4s;
    -moz-transition    : all .4s;
    transition         : all .4s;
}

.anotherbox {
    top:200px;
	left:300px;
	width:100px;
	height:100px;
	position:absolute;
	background-color:#03F;
	-webkit-transition : all .4s;
    -moz-transition    : all .4s;
    transition         : all .4s;
}

.boxToggle  {
	-ms-transform: translate(50px,100px); 
	-webkit-transform: translate(50px,100px); 
	transform: translate(50px,100px);
}

.anotherboxToggle  {
	-ms-transform: translate(-50px,-100px); 
	-webkit-transform: translate(-50px,-100px); 
	transform: translate(-50px,-100px);
}

JavaScript

$(document).ready(function() {
	$('.box').toggleClass('boxToggle');
	$('.anotherbox').toggleClass('anotherboxToggle');
	$('.box').click(function() {
        $(this).toggleClass('boxToggle');
    });
	
	$('.anotherbox').click(function() {
        $(this).toggleClass('anotherboxToggle');
    });
    
});