JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<div id="login">
    <div id="title"><span class="bold">Adobe BrowserLab</span><br> A CS Live online service</div>
    <div id="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"/>
        <a href="#" id="forgotPw">Forgot password?</a>
        <span id="staySignedIn">
            <input type="checkbox" id="rememberMe">
            <label for="rememberMe"> Stay signed in</label>
        </span>
        <button id="start">Start using BrowserLab</button>
    </div>
    <div id="creatAccount">
        <a href="#" class="bold">Create an Adobe ID</a>
    </div>
</div>

CSS

#title{
    border-bottom:1px solid #000;
    padding:15px;
    height:27px;
}
#login{
    margin:0 auto;
    margin-top:50px;
    background:#4D4D4D;
    color:#fff;
    text-shadow:1px 0px 1px #262626;
    width:220px;
    font-size:14px;
    height:315px;
    line-height:17px;
    
    -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+ */
    
}
#loginForm{
    padding:15px;
    border-top:1px solid #6D6D6D;
    border-bottom:1px solid #000;
    height:180px;
}
#creatAccount{
    padding:15px;
    border-top:1px solid #6D6D6D
        height:27px;
}
#creatAccount 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{float:right; }

#rememberMe{cursor:pointer;}

#start{
    box-shadow: inset 0 0 3px #fff;
    width:185px; height:25px; background:#ccc;
    margin-top:15px;
padding:3px;

    font-weight:600;
    border:1px solid black; 
    cursor:pointer;    
    background-color: #FFC600;   background-image: -webkit-gradient(linear, left top, left bottom, from(#FFC600), to(#FFA100)); /* Saf4+, Chrome */   background-image: -webkit-linear-gradient(top, #FFC600, #FFA100); /* Chrome 10+, Saf5.1+ */   background-image:    -moz-linear-gradient(top, #FFC600, #FFA100); /* FF3.6 */   background-image:     -ms-linear-gradient(top, #FFC600, #FFA100); /* IE10 */   background-image:      -o-linear-gradient(top, #FFC600, #FFA100); /* Opera 11.10+ */   background-image:         linear-gradient(top, #FFC600, #FFA100);             filter:...

JavaScript

$(".inputField").focus(function() {
    $(".inputField").removeClass("inputFieldActive");
    $(this).addClass("inputFieldActive");
});