JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="shrinkify">Shrinkify me</a>
<div>
    <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

div {
    width:120px;    
    height:120px;
    border:4px solid black;
    padding:5px;
    text-align:center;
    display:table-cell; 
    vertical-align:middle;
    position:relative;
    left:200px;
    top:100px;
    -webkit-transform: scale(2);
}

div a {
    display:inline-block;
    border:2px solid black;
    -webkit-border-radius:5px;
    width:25px;
    height:25px;
}

div a:nth-child(3n+1) {
    border-width:3px;
}

div.shrink {
    left:10px;
    -webkit-transform: scale(1);
}

JavaScript

$('#shrinkify').click(function() {
    $('div').toggleClass('shrink');
    return false;
});