JSFiddle - React, Tailwind, and code Playground

HTML

<div id="expandbox" expanded="false">
			<input name="username" type="text" placeholder="Username"             disabled></input>
			<input name="password" type="password" placeholder="Password" disabled></input>
			<button type="submit" disabled>go</button>
</div>
<a href="#" id="plus" onclick="expandBox()">
    +
</a>

CSS

#expandbox {
	display:none;
	position:fixed;
	height:0px;
	-webkit-transition:height 0.5s;
	transition:height 0.5s;
	-o-transition:height 0.5s;
	-moz-transition:height 0.5s;
}

JavaScript

//expand top box
var box = document.getElementById("expandbox");
function expandBox(){
    if(box.getAttribute("expanded")=="false"){
        box.setAttribute("expanded","true");
        box.style.height="100px";
        box.style.display="block";
    }else{
        box.setAttribute("expanded","false");
        box.style.height="0px";
        box.style.display="none";
    }
}