JSFiddle - React, Tailwind, and code Playground

HTML

<div class="authentication">
    <div class="form-inputs">THE FORM</div>
</div>

some content

CSS

body {
    margin: 0;
}
.authentication {
    width: 200px;
    height: 200px;
    background: white;
    position: relative;
}
.form-inputs {
    position: relative;
    display: none;
    z-index: 1;
}

JavaScript

$blue = $('<div>').css({
    background: 'blue',
    position: 'absolute',
    width: '100%',
    height: '0',
    top: '0',
    opacity: '0'
}).appendTo('.authentication').animate({opacity: '1', height: '100%'},1000, 'easeInQuad' , function(){
    $('.form-inputs').fadeIn();
});