JSFiddle - React, Tailwind, and code Playground

HTML

<div id="top-stuff">
        <div id="top-bar-out">
            <div id="container">
                <div id="topnav">
                    <div class="active-links">
                        <div id="session">
                            <a id="signin-link" href="#">
                            <em>Have an account?</em>
                            <strong>Sign in</strong>
                            </a>
                        </div>
                        <div id="signin-dropdown">
                            <form method="post" class="signin" action="#">
                            	<fieldset class="textbox">
                            		<label class="username">
                            			<span>Username or email</span>
                            			<input id="username" name="username" value="" type="text" autocomplete="on">
                            		</label>
                            
                            		<label class="password">
                            			<span>Password</span>
                            			<input id="password" name="password" value="" type="password">
                            		</label>
                            	</fieldset>
                            
                                <fieldset class="remb">
                                    <label class="remember">
                                        <input type="checkbox" value="1" name="remember_me" />
                                        <span>Remember me</span>
                                    </label>
                                    <button class="submit button" type="button">Sign in</button>
                                </fieldset>
                                <p>
                                    <a class="forgot" href="#">Forgot your password</a>
                                </p>
                            </form>
                        </div>
                    </div><!--End active-links-->
                </div><!--End...

CSS

/*****************************
SELAMAT DATANG DI DUMET SCHOOL
*****************************/

* {margin: 0; padding: 0;}

a {
	text-decoration: none;
	color: #FFF;
}

body {
	font-family: Arial, Helvetica, sans-serif;
	color: #333;
}

#wp-header {
	margin: auto;
	width: 765px;
	padding: 10px;	
}

#wp-header header {
	padding: 200px 0 0 0;	
}

#wp-header header h1 {
	text-transform: uppercase;	
}

#wp-header header h3 {
	margin-bottom: 20px;
}

#wp-header header a {
	text-transform: none;
	color: #F90;	
}

#wp-header header a:hover {
	color: #03F;	
}

/********************
Style Signin Dropdown
********************/

#top-stuff {
	left:0;
	position:fixed;
	top:0;
	width:100%;
	z-index:12;
}

#top-bar-out {
	display:block;
	position:relative;
	width:100%;
	height:40px;
	background: -moz-linear-gradient(center top, #333333, #111111);
	background: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#111111));
	background:  -o-linear-gradient(top, #333333, #111111);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#333333', EndColorStr='#111111');
	box-shadow:0 1px 2px #666666;
	-webkit-box-shadow: 0 1px 2px #666666;
}

.active-links {
	position:absolute;
	top:0;
}
#container {
    width:780px;
    margin:0 auto;
    position: relative;
}

#topnav {
    text-align:right;
}

#session {
	cursor:pointer;
	display:inline-block;
	height:20px;
	padding:10px 12px;
	vertical-align: top;
	white-space: nowrap;
}

#session.active, #session:hover {
	background:rgba(255,255,255,0.1);
	color:fff;
}


a#signin-link {
	color:#bababa;
	position:relative;
}

a#signin-link em {
	font-size:10px;
	font-style:normal;
	margin-right:4px;
}

a#signin-link strong {
	color:#fff;
}

#signin-dropdown {
	background-color:#1693A5;
	border-bottom-left-radius:5px;
	border-bottom-right-radius:5px;
	box-shadow:0 1px 2px #666666;
	-webkit-box-shadow: 0 1px 2px #666666;
	min-height:200px;
	min-width:160px;
	position:absolute;
	right:0;
	display:none;
}

#signin-dropdown...

JavaScript

$(document).ready(function () {
$('.active-links').click(function () {
        if ($('#signin-dropdown').is(":visible")) {
            $('#signin-dropdown').hide()
			$('#session').removeClass('active');
        } else {
            $('#signin-dropdown').show()
			$('#session').addClass('active');
        }
		return false;
    });
	$('#signin-dropdown').click(function(e) {
        e.stopPropagation();
    });
    $(document).click(function() {
        $('#signin-dropdown').hide();
		$('#session').removeClass('active');
    });
});