JSFiddle - React, Tailwind, and code Playground

HTML

<div class="authentication">
    <div class="back" id="backs"></div>
	<div class="form-inputs" id="form">
	<input type="text">
	<input type="submit">
	</div>
</div>
<script>
down('backs');
</script>

CSS

.authentication{position:absolute;width:400px;height:300px;border:1px #c0c0c0 solid;overflow:hidden;}
.back{position:absolute;z-index:0;height:0%;width:100%;background-color:#53a2fa;}
#form{position:absolute;z-index:1;width:100%;height:100%;display:none;}

JavaScript

function down(ids){
var speed = 10;
var ele = document.getElementById(ids);
var height = parseInt(ele.style.height || ele.offsetHeight);
height = (height + 2);
ele.style.height = height+'%';
if(height<100)
setTimeout(function(){down(ids);},speed)
else
{
	$('#form').fadeIn(); //or do whatever you want
	return;
}
}