JSFiddle - React, Tailwind, and code Playground

by envira

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>
                <br>
                <a class="mobile" href="#">Already using Twitter via SMS?</a>
                </p>
                </form>
                </div>
                </div>
                </div>
        </div>
    </div>
</div>

CSS

* {
    margin:0;
    padding:0;
}

body {
    background:#fff;
    position:relative;
    font:13px Arial, Helvetica, sans-serif;
}

#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;
    right:8px;
    top:0;
}
#container {
    width:280px;
    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;
}

a {
    color:#2d76b9;
    text-decoration:none;
}

#signin-dropdown {
    background-color:#202020;
    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 form{
    cursor:pointer;
    padding:10px;
    text-align:left;
}

#signin-dropdown .textbox span { color:#BABABA;}
#signin-dropdown .textbox input { width:200px; }

fieldset { 
    border:none; 
}

form.signin .textbox label { 
    display:block; 
    padding-bottom:7px; 
}

form.signin .textbox...

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');
    });
});