JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div id="loginOnForm">
    <div id="login">
        <div class="FormTitle"><span class="bold">Login form</span> - My site</div>
        <div class="loginForm">
            <span class="bold">Enter your AdobeID</span>
            <input type="text" class="inputField" value="Email address (Adobe ID)"/>
            <input type="text" class="inputField" value="Password"/>
            <span id="staySignedIn">
            <a href="#" id="forgotPw">blackspotwiggins?</a><br>
                <input type="checkbox" id="rememberMe">
                <label for="rememberMe"> Stay signed in</label>
            </span>

        </div>
        <div class="formBottom">
            <button class="start">Log now in</button>
        </div>
    </div>


    <div id="noPassword">
        <div class="FormTitle"><span class="bold">blackspotwiggins said so!</span><br><a href="#" class="closeSlide">X</a></div>
        <div class="loginForm">
        </div>
        <div class="formBottom">
            <button class="start">Request new password</button>
        </div>
    </div>
</div>

CSS

body{
         background: url("img/bg.jpg");
     }
 
     .FormTitle{
         border-bottom:1px solid #000;
         padding:15px;
 
     }
 
     #loginOnForm{
         -moz-border-radius: 7px; /* FF1-3.6 */
         -webkit-border-radius: 7px; /* Saf3-4, iOS 1-3.2, Android <1.6 */
         border-radius: 7px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
         overflow: hidden;
         width:220px;
         height:330px;
         background: #4D4D4D;
         margin:0 auto;
         display: none;
         -moz-box-shadow: 1px 3px 4px #000; /* FF3.5 - 3.6 */
         -webkit-box-shadow: 1px 3px 4px #000; /* Saf3.0+, Chrome */
         box-shadow: 1px 3px 4px #000; /* Opera 10.5, IE9, FF4+, Chrome 10+ */
         margin-top:50px;
     }
 
     #noPassword{margin-left: 220px; margin-top: -336px;}
     #login, #noPassword{
         width:220px;
         background:#4D4D4D;
         color:#fff;
         text-shadow:1px 0px 1px #262626;
         line-height:17px;
         position: relative;
         font-size:14px;
     }
     .loginForm{
         padding:15px;
         border-top:1px solid #6D6D6D;
         border-bottom:1px solid #000;
         height:200px;
     }
     .formBottom{
         padding:15px;
         border-top:1px solid #6D6D6D;
     }
     .formBottom a{
         color:#FFAE00;
         text-decoration:none;
     }
 
     .bold{font-weight:600; font-size:14px;}
 
     .inputField{
         background:#3F3F3F;
         margin:7px 0;
         color:#fff;
         padding:3px;
         border:1px solid #212121;
         width:183px;
         box-shadow: inset 0 0 3px #383838;
     }
 
     .inputFieldActive{
         box-shadow: inset 0 0 3px #999, 0 0 3px #fff;
     }
 
     #forgotPw{
         color:#6DBCFD;
         float:right;
         text-decoration:none;
         margin:5px 0px;
     }
 
     #staySignedIn {
         background: none repeat scroll 0 0 #515151;
         border: 1px solid #3E3E3E;
         float: right;
 ...

JavaScript

$(document).ready(function(){
         $('#loginOnForm').delay(700).fadeIn(1500);
         $(".inputField").focus(function() {
             $(".inputField").removeClass("inputFieldActive");
             $(this).addClass("inputFieldActive");
             $(this).val("");
         });
 
 jQuery.fn.animateRight = function() {
     var $marginLefty = this.next();
     $marginLefty.animate({
       marginLeft: parseInt($marginLefty.css('marginLeft'),100) == 0 ?
         $marginLefty.outerWidth() :
         220
     });
 };
 
 jQuery.fn.animateLeft = function() {
     var $marginLefty = this.next();
     $marginLefty.animate({
       marginLeft: parseInt($marginLefty.css('marginRight'),100) == 0 ?
         $marginLefty.outerWidth() :
         0
     });
 };
         $("#forgotPw").click(function(){
             $("#login").animateLeft();
         });
         $(".closeSlide").click(function(){
           $("#login").animateRight();
         });
     });