JSFiddle - React, Tailwind, and code Playground

HTML

<div id="el">
    Hello my dear friend.
</div>
<div class="button transition" onclick="runWith()">
    Run with setTimeout()
</div>
<div class="button transition" onclick="runWithout()">
    Run without setTimeout()
</div>
<div class="button transition" onclick="resetIt()">
    Reset
</div>

CSS

.transition {
    -moz-transition:            all 0.32s cubic-bezier(.21,.95,.8,.94);
    -webkit-transition:         all 0.32s cubic-bezier(.21,.95,.8,.94);
    -o-transition:              all 0.32s cubic-bezier(.21,.95,.8,.94);
    -ms-transition:             all 0.32s cubic-bezier(.21,.95,.8,.94);
    transition:                 all 0.32s cubic-bezier(.21,.95,.8,.94);    
}
#el {
    position: absolute;
    top: -50px;
    left: 50%;
    margin-left: -200px;
    width: 400px;
    background-color: #eaeaea;
    box-shadow: 2px 2px 2px rgba(0,0,0,.35);
    opacity: 0;
}
#el.visible {
    opacity: 1;
}
.button {
    cursor: pointer;
    padding: 3px 8px;
    background-color: #e2e2e2;
    border: 1px solid #cccccc;
    float: left;
    margin-right: 5px;
}
.button:hover {
    background-color: #fbffcc;
}

JavaScript

var runWith=function(){
    $('#el').css({
        top: '150px'
    });
    window.setTimeout(function(){
        $('#el').addClass('transition visible');
    });
};
var runWithout=function(){
    $('#el').css({
        top: '150px'
    });
    $('#el').addClass('transition visible');
};
var resetIt=function(){
    $('#el').css({
        top: '-50px'
    });
    $('#el').removeClass('transition visible');
};