JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://condorstudios.com/stuff/temp/js/jquery-1.10.2.min.js"></script>
<script src="http://condorstudios.com/stuff/temp/js/jquery-migrate-1.2.1.min.js"></script>
<div class="login">
    <ul>
        <li>
            <a href="" class="alt">Login</a>
            <div class="dropdown">
                <section class="top">
                    <a href="">Login</a>
                </section>
                <section class="main">
                    <form action="" method="">
                        <div class="field">
                            <input type="text" name="username" class="tb" id="username" placeholder="Username">
                        </div>
                        <div class="field">
                            <input type="password" name="password" class="tb" id="password" placeholder="Password">
                        </div>
                        <div class="field submit">
                            <input type="image" src="http://condorstudios.com/stuff/temp/images/little.gif" name="form_loginbox_proceed">
                        </div>
                    </form>
                    <div class="remember">
                        <div class="rm_wrap">
                            <div class="field">
                                <input type="checkbox" name="remember" id="remember_me" value="1">
                            </div>
                            <label for="remember_me">Remember Me</label>
                            <div class="contentClear"></div>
                        </div>
                    </div>
                    <div id="rm_warning" class="warning" style="display: none;">
                        <div class="msg">
                            Do not check on<br>shared computers.
                        </div>
                    </div>
                    <div class="lost">
                        <a href="">Lost username / password</a>
                    </div>
                </section>
               ...

CSS

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, li, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	background: transparent;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section
{
	display: block;
}
body {
	line-height: 1;
}

ol, ul {
    -webkit-padding-start: 0px;
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

p {
	margin-top: 0px;
	padding-top: 0px;
}

img {
  color: transparent;
  font-size: 0;
/*
  For IE.
  http://css-tricks.com/ie-fix-bicubic-scaling-for-images
*/
  -ms-interpolation-mode: bicubic;
}

li {
/*
  For IE6 + IE7:

  "display: list-item" keeps bullets from
  disappearing if hasLayout is triggered.
*/
  display: list-item;
}

svg {
/*
  For IE9. Without, occasionally draws shapes
  outside the boundaries of <svg> rectangle.
*/
  overflow: hidden;
}

/*
    HTML 5
*/

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display:...

JavaScript

$(document).ready(function() {

    if ( !("placeholder" in document.createElement("input")) ) {
        $("input[placeholder], textarea[placeholder]").each(function() {
            var val = $(this).attr("placeholder");
            if ( this.value == "" ) {
                this.value = val;
            }
            $(this).focus(function() {
                if ( this.value == val ) {
                    this.value = "";
                }
            }).blur(function() {
                    if ( $.trim(this.value) == "" ) {
                        this.value = val;
                    }
                })
        });

        // Clear default placeholder values on form submit
        $('form').submit(function() {
            $(this).find("input[placeholder], textarea[placeholder]").each(function() {
                if ( this.value == $(this).attr("placeholder") ) {
                    this.value = "";
                }
            });
        });
    }

});

$(function() {

    var dropdown = $('div.login div.dropdown')
        .on('focus', 'input', function() {

            dropdown.css('display', 'block');
        })
        .on('blur', 'input', function() {

            dropdown.removeAttr('style');
        });
});

$(document).ready(function() {  
    
    $('#remember_me').click(function() {
        toggleRememberExpl();
    });
        
});

function toggleRememberExpl(page) {
    
    if (page == 'login') {
    
        if (jQuery('#rm_box').prop('checked') == true) {
            // Show text
            jQuery('#check-share').show();
        } else {
            // Hide text
            jQuery('#check-share').hide();        
        }
    
    } else {
        
        if (jQuery('#remember_me').attr('checked') == 'checked') {
            // Show text
            jQuery('#rm_warning').show();
        } else {
            // Hide text
            jQuery('#rm_warning').hide();        
        }        
        
    }
    
}