JSFiddle - React, Tailwind, and code Playground

by Maikel1234

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<a href="#open">Login</a>
<div id="loginform" align="center" style="display:none">
    <div id="close"><a href="#">X</a></div>
    <span class="login">Username</span><br/>
    <input type="text" id="login" placeholder="Username"><br/>
    <span class="login">Password</span><br/>
    <input type="password" id="password" placeholder="••••••••"><br/>
    <input type="submit" value="Log in" id="loginbutton">
</div>
<script>
$("a").click(function () {
$("#loginform").toggle("slow");
});
</script>

CSS

#password, #login {
border: 1px solid #B9B9B9;
border-top-color: #A4A4A4;
-moz-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-ms-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-o-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-webkit-box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
box-shadow: 0 1px 0 #fff,inset 0 1px 1px rgba(0,0,0,.17);
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
padding: 2px;
padding-left: 4px !important;
outline: none;
font-size: 8pt;
}
.login {
 margin-right: 65px;   
}
#close {
 margin-left: 100px;  
 font-family: Arial, Serif;
}
#close a {
 padding: 0 4px;
 font-size: 12px;
 border: 1px solid purple;
 border-radius:9999px;
 color: lightpurple;
 text-decoration: none;  
}
#close a:hover {
 color: black;  
}
#loginbutton {
 border-radius: 2px;
 margin-top: 2px;
 margin-right: 90px;
 padding: 2px;
 color: white;
 background: #1e5799;
 background: -moz-linear-gradient(top,  #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
 background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8));
 background: -webkit-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
 background: -o-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
 background: -ms-linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
 background: linear-gradient(top,  #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 );
 border: none;
}