JSFiddle - React, Tailwind, and code Playground

HTML

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

<button id="2007">2007</button><button id="2008">2008</button><button>2009</button><button>2010</button>
<button>2011</button>
<button>2012</button>

<!--<div id="test"></div>-->

<div id="test2"></div>

CSS

/*#test {
  background-color: blue;
  opacity: 0.5;
  border-radius: 50%;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 50px;
  left: 250px;
  z-index:1;
}*/

#test2 {
  background-color: red;
  opacity:0.5;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  position: absolute;
  z-index:2;
}

JavaScript

$("#2007").click(function(){
    $("#test2").css({
        'transition': 'all 1s',
        'transform': 'scale(0.5)',
    },function(){
			$("#test2").animate({
        top: '10%',
        left: '20%'
      },1000)
		});
		
});