JSFiddle - React, Tailwind, and code Playground

Nice Login Form

by bitstarr

HTML

<script src="http://saveasbro.com/download/modernizr.custom.82579.js"></script>
<form action="#">
<p>
    <label for="login">Username or email</label>
    <input type="text" required="" placeholder="Username or email" name="login">
</p>
<p>
    <input type="submit" name="submit" value="Continue">
</p>  
</form>
<!-- from http://tympanus.net/Tutorials/CustomLoginFormStyling/index4.html -->

CSS

*,
*:after,
*:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body { font: 1.9em/1.5 sans-serif; background: url(http://fc06.deviantart.net/fs36/f/2009/324/3/7/poppy_by_emuman.jpg) 50% no-repeat }
label { display: none }
form {
    width: 300px;
    margin: 60px auto 30px;
    padding: 10px;
    position: relative;

    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: white;
    text-shadow: 0 2px 1px rgba(0,0,0,0.3);
}

input[type=text],
input[type=password] {
    /* Size and position */
    width: 100%;
    padding: 8px 4px 8px 10px;
    margin-bottom: 15px;

    /* Styles */
    border: 1px solid #4e3043; /* Fallback */
    border: 1px solid rgba(78,48,67, 0.8);
    background: rgba(0,0,0,0.15);
    border-radius: 2px;
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
        inset 0 1px 1px rgba(0,0,0,0.1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

    /* Font styles */
    font-family: 'Raleway', 'Lato', Arial, sans-serif;
    color: #fff;
    font-size: 13px;
}

/* Placeholder style (from http://stackoverflow.com/questions/2610497/change-an-inputs-html5-placeholder-color-with-css) */

input::-webkit-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

input:-moz-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

input:-ms-input-placeholder {
    color: rgba(37,21,26,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}

input[type=text]:hover,
input[type=password]:hover {
    border-color: #333;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=submit]:focus {
    box-shadow: 
        0 1px 0 rgba(255,255,255,0.2), 
     ...