JSFiddle - React, Tailwind, and code Playground

HTML

<div class="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 class="button">
            <button class="btn" name="send" type="submit" value="enviar">Login</button>
        </div>
    </form>
</div>

CSS

.admin {
	position: absolute;
	margin-top: 140px;
	right: 200px;
	width: 224px;
	z-index: 1;
	height: 140px;
}
.admin p {
	font-family: Lato-Light;
	float: right;
	cursor: pointer;
	color: blue;
	bottom: 0;
	right: 15px;
	position: absolute;
	font-size: 11px;
	opacity: 0.3;
}
p.adminPvisible {
	opacity:1;
}
.admin p:hover {
	opacity: 1;
}
.admin form {
	display: none;
	font-family:Lato-Light;
	font-size: 11px;
	margin:35px 0 0 100px;
}
.btn {
	display: none;
	font-size: 12px;
	margin: 5px 0 0 0;
	font-family: Lato-Regular;
}
.admin input {
	width: 120px;
	font-size: 12px;
	margin: 0;
	height: 20px;
}

JavaScript

$(document).ready(function () {
    $('.admin > p').click(function () {
        $(this).toggleClass('adminPvisible');
        var right = $('.admin > p').css('right') == '135px' ? '0' : '135px';
        $('.admin > p').animate({
            right: right,
            width: '50px'
        });
        $('.admin > form, .btn').stop(true).slideToggle();        
    })
})