JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  <style type="text/css">
  div { margin: 0px; width: 1px; height: 1px; background: green; border: 1px solid black;}
</style>

</head>
<body>
<p onclick="$('#divdef').effect('size', { scale: 'box', to: {width: 100, height: 200}}, 1000);">click - origin default</p>
<p onclick="$('#div1').effect('size', { scale: 'box', origin: ['top','left'], to: {width: 100, height: 200}}, 1000);">click - origin top left</p>
<p onclick="$('#div2').effect('size', { scale: 'box', origin: ['middle','center'], to: {width: 100, height: 200}}, 1000);">click - origin middle center</p>
<p>&nbsp;</p>
<div id="divdef" style="display: none;"> SD ASDASD ASD ASD</div>
<div id="div1" style="display: none;"> SD ASDASD ASD ASD</div>
<div id="div2" style="display: none;"> SD ASDASD ASD ASD</div>

</body>
</html>