JSFiddle - React, Tailwind, and code Playground

by vandigroup

HTML

<h2>Account Log in</h2>

<div id="loginforms">
     <h3>Please choose your account type:</h3>

    <div id="loginSelect">
        <div><a class="showLogin" target="attorney"><img src="http://maderassociates.com/wp-content/themes/mader_associates/images/icon-attorney.png" /><span>Attorney</span></a>
        </div>
        <div><a class="showLogin" target="client"><img src="http://maderassociates.com/wp-content/themes/mader_associates/images/icon-client.png" /><span>Client</span></a>
        </div>
        <div><a class="showLogin" target="agent"><img src="http://maderassociates.com/wp-content/themes/mader_associates/images/icon-agent.png" /><span>Agent</span></a>
        </div>
        <div class="clear"></div>
    </div>
    <div id="divattorney" class="targetDiv">
        <div class="loginwrap">
             <h4>Please enter your credentials</h4>

            <form name="adminLoginForm" id="adminLoginForm" method="post" action="loginProcess.php" onSubmit="return validateLoginForm();">
                <div class="lwleft">
                    <label>Username</label>
                    <input type="text" name="userName" id="userName" class="logintext" maxlength="75" value=" ">
                </div>
                <div class="lwright">
                    <label>Password</label>
                    <input type="password" name="pwd" id="pwd" class="logintext" maxlength="20" value="">
                    <input class="loginsubmit" type="submit" name="Submit" id="Submit" value="Login"> <small><a href="/stage/pops/contact.php">Forgot your password?</a></small> 
                </div>
            </form>
            <div class="clear"></div>
        </div>
    </div>
    <div id="divclient" class="targetDiv">
        <div class="loginwrap">
             <h4>Please enter your credentials</h4>

            <form name="adminLoginForm" id="adminLoginForm" method="post" action="loginProcess.php" onSubmit="return validateLoginForm();">
                <div class="lwleft">
 ...

CSS

.clear {
    clear:both;
}
#loginforms {
    height:600px;
}
#loginforms h3 {
    margin:60px 0 10px;
    font-size:14px;
}
#loginSelect {
    margin-top:10px;
}
#loginSelect div {
    float:left;
    margin:12px 0;
    width:192px;
    text-align:center;
}
#loginSelect a {
    position:relative;
    margin:0 auto;
    text-decoration: none;
    font-weight:bold;
}
#loginSelect img {
    margin:0 auto;
    display:block;
}
#loginSelect span {
    display:none;
    position:relative;
    display:block;
    text-size:13px;
}
a.showLogin {
    cursor: pointer;
}
.showLogin img:hover {
    opacity: .9;
}
.targetDiv {
    display:none;
}
.loginwrap {
    clear:both;
    margin:24px auto;
    padding:12px 40px;
    width:512px;
    background:#f2f3f3;
    border-right:1px solid #010b15;
    border-bottom:1px solid #010b15;
}
.loginwrap h4 {
    margin-bottom:6px;
    padding-bottom:6px;
    border-bottom:1px dotted #aaa;
    font-size:14px;
}
.lwleft {
    float:left;
    width:200px;
}
.lwright {
    float:left;
    width:294px;
}
#loginforms br, #loginforms p {
    display:none;
}
#loginforms label {
    display:block;
    margin-bottom:-4px;
    color:#010b15;
    font-size:11px;
}
#userName.logintext, #pwd.logintext {
    display:inline;
    margin:0;
    background:#fff;
    border:1px solid #ccc;
    -webkit-border-radius: 4px;
    border-radius: 4px;
}
#pwd.logintext {
    width:190px;
    height:26px;
}
#loginforms small {
    position:relative;
    display:block;
    top:-4px;
    left:4px;
    font-size:66%;
}
#loginforms input[type="submit"] {
    display:inline;
    position:relative;
    margin:0;
    top:-2px;
    -moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
    -webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
    box-shadow:inset 0px 1px 0px 0px #ffffff;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #f9f9f9), color-stop(1, #e9e9e9));
    background:-moz-linear-gradient(center top, #f9f9f9 5%, #e9e9e9 100%);
   ...

JavaScript

$(function () {
    $('.showLogin').click(function () {
        $('.targetDiv').hide();
        $('#div' + $(this).attr('target')).fadeIn('slow');
    });
});