JSFiddle - React, Tailwind, and code Playground

by George Berkeley

HTML

<div class="clase-1">
          <div class="clase-2">
          </div>
        </div>

CSS

.clase-1 {
	position:relative;
	top:0;
	left:0;
	width:250px;
	height:250px;
	background-color:lightblue;
}

.clase-2 {
	position:relative;
	top:0;
	left:0;
	width:100px;
	height:100px;
	background-color:navy;
}

JavaScript

$(document).ready(function()
  {
	  $(".clase-1").mouseover(function()
	  {
		  $(".clase-2").animate({top:'150'},1000,'swing');
		  $(".clase-2").animate({left:'150'},1000,'swing');
		  $(".clase-2").animate({top:'0'},1000,'swing');
		  $(".clase-2").animate({left:'0'},1000,'swing');
	  });
  });