JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>
<img />

CSS

div {
    position   : absolute;
    top        : -50px;
    left       : 50px;
    width      : 100px;
    height     : 100px;
    background : blue;
}
img {
    position   : absolute;
    top        : 0;
    right      : 0;
    width      : 100px;
    height     : 100px;
    background : red;
}

JavaScript

$('div').on('click', function (event) {
    event.stopPropagation();
});
$('img').on('click', function (event) {
    event.stopPropagation();
    var $div = $('div');
    if ($div.css('top') == '-50px') {
        $div.stop().animate({top : 0}, 250);
    } else {
        $div.stop().animate({top : '-50px'}, 150);
    }
});
$(document).on('click', function () {
    $('div').stop().animate({top : '-50px'}, 150);
});