JSFiddle - React, Tailwind, and code Playground

HTML

madhu

CSS

div { margin: -1px 0 0 -1px; display: table; float: left; width:20px; height:20px;
}
div em {
    display:table-cell; 
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
div span {
    display: block; 
    width: 100%; 
    height: 100%; 
    background: red; 
    -moz-border-radius: 40px;
    margin: 0 auto;
}

JavaScript

var shrink = function() {
    $(this).animate({
        'width': '3px',
        'height': '3px'
    }, 500);
};
var grow = function() {
    $(this.firstChild.firstChild)
        .delay(50).animate({
        'width': '20px',
        'height': '20px'
    }, 300);
};

$('div').append('<em><span><span><em/>')
    .find('> em > span').mouseenter( shrink )
    .end().mouseleave(grow)
    .click(function() {
        $(this).unbind('mouseleave', grow);
});