JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="login.css">
    </head>
    <div id='content'>
        <div class="pageHeader">
            <h2>Login</h2>
            <!--<p>Need an account? <a href="signup">Sign up</a> now to get started.</p>
            <p>Have you forgotten your password? <a href="reset_password">Reset your password</a> now.</p>-->
        </div> 
        <div class="pageContainer">
        <form id="common-form" class="ui_forms" id="login_form" method="post" accept-charset="utf-8">
        <fieldset>

            <p><label for="id_username"><font size="2px" color="black">Username:</font></label> <input id="id_username" type="text" name="username" maxlength="30"  /></p>
            <p><label for="id_password"><font size="2px" color="black">Password:</label> <input type="password" name="password" id="id_password" /></p>

        </fieldset>
        <div class="submitCont">
            <div class="actionButton submit">
                <input id="sub" type="submit" value="submit" onclick="func()"  />
                
            </div> 
            <input type="checkbox" id="chk" /> Stay Signed In
        </div>
    </form>
</div>
</div>
<script>
    function func(){
        var str= document.getElementById("id_username").value;
    
        var patt=/\s/g;
        
        if(str==""||(str.match(patt).length!=0))
        {
            alert("enter the valid username");
            }
        
        else{
            alert("success");
            window.location.href="https://www.google.com";
        }
    }    
</script>

CSS

body {
    overflow: auto;
}

/*a {
    color: #5AA4D7;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

p.clear { 
    clear: both;
}*/

#content em {
    font-style: italic;
    font-family: Times;
}

/* sidebar
 ================================================================ */
#sidebar {
    display: none;
}

.pageContainer {
    padding: 15px;
    clear: both;
}

/* 
 ================================================================ */
#common-form {
    clear: both;
    width: 318px;
}

#common-form.formSide {
    float: left;
}

    #common-form p {
        padding-bottom: 10px;
        color: #A7A7A7;
        font-size: .9em;
    }
    
        #common-form p label {
            display: block;
            padding-bottom: 3px;
        }
        
        #common-form p input {
            width: 300px;
            display: block;
            padding: 8px 8px;
            border: solid 1px #ccc;
            font-size: 1.3em;
            font-family: Helvetica, Arial, Verdana, sans-serif;
            color: #7E7E7E;
            outline: none;
            margin-bottom: 3px;
            
            box-shadow: 0 1px 2px #E3E3E3;
            -moz-box-shadow: 0 1px 2px #E3E3E3;
            -webkit-box-shadow: 0 1px 2px #E3E3E3;
            -webkit-transition: all 0.3s;
        }
        
        #common-form p input:focus {
            border: solid 1px #598C28;
            color: #434343;
            
            box-shadow: 0 0 4px #7FC666;
            -moz-box-shadow: 0 0 4px #7FC666;
            -webkit-box-shadow: 0 0 4px #7FC666;
        }

    #common-form .submitCont {
        height: 100%;
        overflow: hidden;
        width: 100%;
        padding-top: 10px;
    }

    #common-form .errorlist li {
        padding-top: 3px;
        color: #b41;
        font-weight: bold;
    }
    
    /* paragraph after an error */
    /*
    #common-form .errorlist + p {
        background-color: #FFFADB;
        margin-bottom: 6px;
    ...