JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<a href="index.html" class="active" id="signin">Identificare</a>
<div id="main">
<!-- Create div first for Login Form-->
<div id="first">
<form action="" method="post">
<input type="text" id="loginemail" placeholder="Email" />
<input type="password" id="loginpassword" placeholder="Parola" />
<input type="button" id="login" value="Logare" />
</form>
</div>
<!-- /Create div first for Login Form-->
</div>
CSS
#main {
position: absolute;
margin-top: 15px;
float: right;
z-index: 200;
}
#first {
width: 120px;
height: 10px;
margin-top: -110px;
padding: 29px 22px;
background-color: white;
border: 1px solid black;
border-radius: 5pz;
position: absolute;
left: 50%;
margin-left: 1070px;
top: 0px;
display:none;
}
h3 {
margin-top: 0;
}
#loginemail,#loginpassword {
padding: 5px;
width: 55%;
height: 15px;
margin-top: -21px;
font-size: 8px;
border: 1px solid #e3e3e3;
border-radius: 0;
background: #fff;
font-size: 10px;
line-height: 15px;
color: #333;
-ms-box-sizing: border-box;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#loginpassword{
margin-top: 10px;
padding: 9px 10px;
}
#login{
background: linear-gradient(to bottom, #22abe9 5%, #36caf0 100%);
box-shadow: inset 0px 1px 0px 0px #7bdcf4;
border: 1px solid #0F799E;
color: #ffffff;
width: 58px;
height: 15px;
margin-top: 0px;
margin-left: 85px;
font-size: 9px;
font-weight: bold;
cursor: pointer;
text-shadow: 0px 1px 0px #13506D;
}
#login:hover{
background: linear-gradient(to bottom, #36caf0 5%, #22abe9 100%);
}
a {
text-decoration: none;
color: cornflowerblue;
}
p#two {
margin-bottom:0;
}
JavaScript
$(document).ready(function(){
// on click signin It Hide Registration Form and Display Login Form
$("#signin").click(function(){
$("#first").show("block");
});
});