JSFiddle - React, Tailwind, and code Playground

HTML

<ul id="messages">
    <li><a class="box" href="#"></a></li>
    <li><a class="box" href="#"></a></li>
    <li><a class="box" href="#"></a></li>
</ul>

CSS

.box {
    border: solid 3px #c00;
    width: 120px;
    height: 120px;
    margin: 5px;
    float: left;
}

JavaScript

$("messages").on("click", "a.box", function(event, element){
    element.morph('width: 90px; height: 90px; border-color: #ccc', {
        duration: 1,
        transition: 'linear',
        propertyTransitions: {
            width: 'mirror',
            height: 'easeInOutCirc'
        },
        after: function(){
            element.transform({
                rotation: 3.5,
                scale: 0.5
            });
        }
    });
});