JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css">
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<html>
    <link rel="stylesheet" href="style/style.css" />
    <link rel="stylesheet" href="jquery/jquery-ui.css" />
 
  <script src="jquery/jquery-1.9.1.js"></script>
 
  <script src="jquery/jquery-ui.js"></script>
   
    <script src="myscript/login.js"></script>
 <body>
                <div id="container">
                                  <div id="loginContainer">
                                                <a href="#" id="loginButton"><span>Login</span><em></em></a>
 
                         <div id="loginBox">                
                       <form id="loginForm">
                        <fieldset id="body">
                            <fieldset>
                                <label for="email">Email Address</label>
                                <input type="text" name="email" id="email" />
                            </fieldset>
                            <fieldset>
                                <label for="password">Password</label>
                                <input type="password" name="password" id="password" />
                            </fieldset>
 
                            <input type="submit" id="login" value="Sign in here" />
                            <label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
                        </fieldset>
                        <span><a href="#">Forgot your password?</a></span>
                        </form>
                     </div>
                                  </div>
                </div> 
 </body>  
</html>

CSS

<style>
html,body{width:100%;height:100%;padding:0;background:#fff;margin:0;font-family:arial}
a { text-decoration:none }
.container { width:262px; margin:0 auto; padding-top:200px; }
 
#bar { width:100%; height:35px; padding:15px 0; background:url(../images/bar.png) repeat-x; }
#container { width:960px; margin:0 auto; }
 
/*-------LOGIN STARTS HERE -------*/
 
/* Login Container (default to float:right) */
#loginContainer {
    position:relative;
    float:right;
    font-size:12px;
}
 
/* Login Button */
#loginButton {
    display:inline-block;
    float:right;
    background:#d2e0ea url(../images/buttonbg.png) repeat-x;
    border:1px solid #899caa;
    border-radius:3px;
    -moz-border-radius:3px;
    position:relative;
    z-index:30;
    cursor:pointer;
}
 
#signupButton {
    display:inline-block;
    float:right;
    background:#d6e0ea url(../images/buttonbg.png) repeat-x;
    border:1px solid #899caa;
    border-radius:7px;
    -moz-border-radius:7px;
    position:relative;
    z-index:50;
    cursor:pointer;
}
/* Login Button Text */
#loginButton span {
    color:#445058;
    font-size:14px;
    font-weight:bold;
    text-shadow:1px 1px #fff;
    padding:7px 29px 9px 10px;
    background:url(../images/loginArrow.png) no-repeat 53px 7px;
    display:block
}
 
#loginButton:hover {
    background:url(../images/buttonbgHover.png) repeat-x;
}
 
/* Login Box */
#loginBox {
    position:absolute;
    top:34px;
    right:0;
    display:none;
    z-index:29;
}
 
/* If the Login Button has been clicked */    
#loginButton.active {
    border-radius:3px 3px 0 0;
}
 
#loginButton.active span {
    background-position:53px -76px;
}
 
/* A Line added to overlap the border */
#loginButton.active em {
    position:absolute;
    width:100%;
    height:1px;
    background:#d2e0ea;
    bottom:-1px;
}
 
/* Login Form */
#loginForm {
    width:248px;
    border:1px solid #899caa;
    border-radius:3px 0 3px 3px;
    -moz-border-radius:3px 0 3px 3px;
    margin-top:-1px;
  ...

JavaScript

<script>
$(function() {
    var button = $('#loginButton');
    var box = $('#loginBox');
    var form = $('#loginForm');
   
    button.removeAttr('href');
    button.mouseenter(function(login) {
        box.toggle();
        button.toggleClass('active');
    });
      button.mouseleave(function(login) {
        box.toggle();
        button.toggleClass('active');
    });
      box.mouseenter(function()
      {
              box.toggle();
        button.toggleClass('active');
      });
       box.mouseleave(function()
      {
              box.toggle();
        button.toggleClass('active');
      });
    form.mouseup(function() {
        return false;
    });
    $(this).mouseup(function(login) {
           
        if(!($(login.target).parent('#loginButton').length > 0)) {
            button.removeClass('active');
            box.hide();
        }
    });
});
</script>