JSFiddle - React, Tailwind, and code Playground
HTML
<div id="admin">
<p>
<br>Admin</p>
<form method="POST" action="loginAdmin.php">Username:
<br>
<input type="text" name="username" />
<br />Password:
<br>
<input type="password" name="password" />
<br />
<div id="button">
<button id="btn" name="send" type="submit" value="enviar">Login</button>
</div>
</form>
CSS
#admin {
position: absolute;
margin-top: 350px;
right: 0%;
width: 224px;
z-index: 1;
height: 140px;
}
#admin p {
font-family: Lato-Light;
float: right;
cursor: pointer;
color: blue;
bottom: 0;
right: 20px;
position: absolute;
}
#admin form {
display: none;
font-family:Lato-Regular;
font-size: 14px;
margin:30px 0 0 100px;
}
#admin input {
width: 120px;
}
JavaScript
$(document).ready(function () {
$('#admin > p').click(function () {
var $adminForm = $('#admin > form');
$(this).animate({
'right': $adminForm.is(':visible') ? '20px' : '150px',
});
$adminForm.stop(true).slideToggle();
})
})