JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.twoixter.com/experiments/grow/jquery.growshrink.js"></script>
<a href="#" id="shrinkify">Shrinkify me</a>
<div id="small">
</div>
<div id="big">
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
    <a href="#"></a>
</div>

CSS

#big {
    width:240px;
    height:240px;
    border:4px solid black;
    padding:5px;
    text-align:center;
    display:table-cell; 
    vertical-align:middle;
    position:relative;
    left:200px;
}

#big a {
    display:inline-block;
    border:2px solid black;
    -webkit-border-radius:5px;
    width:55px;
    height:55px;
}

#small {
    position:absolute;
    top:100px;
    width:120px;
    height:120px;
    visibility:hidden;
}

JavaScript

$('#shrinkify').click(function() {
    $('div#big').shrinkTo($('#small'), {
        duration: 1000,
        easing: 'swing',
        opacity: false
    });
    return false;
});