JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<link rel="stylesheet" type="text/css" href="http://tympanus.net/Tutorials/LoginRegistrationForm/css/animate-custom.css" />

    <!-- hidden anchor to stop jump http://www.css3create.com/Astuce-Empecher-le-scroll-avec-l-utilisation-de-target#wrap4  -->
<a href="#tologin"><button class="open">Log in/Sign up</button></a>
    <a class="hiddenanchor" id="toregister"></a>
    <a class="hiddenanchor" id="tologin"></a>
    <div id="wrapper">
        <div id="login" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on"> 
                <h1>Log in</h1> 
                <p> 
                    <label for="username" class="uname" data-icon="u" > Your email or username </label>
                    <input id="username" name="username" required="required" type="text" placeholder="myusername or [email protected]"/>
                </p>
                <p> 
                    <label for="password" class="youpasswd" data-icon="p"> Your password </label>
                    <input id="password" name="password" required="required" type="password" placeholder="eg. X8df!90EO" /> 
                </p>
                <p class="keeplogin"> 
                    <input type="checkbox" name="loginkeeping" id="loginkeeping" value="loginkeeping" /> 
                    <label for="loginkeeping">Keep me logged in</label>
                </p>
                <p class="login button"> 
                    <input type="submit" value="Login" /> 
                </p>
                <p class="change_link">
                    Not a member yet ?
                    <a href="#toregister" class="to_register">Join us</a>
                </p>
            </form>
        </div>
 
        <div id="register" class="animate form">
            <form  action="mysuperscript.php" autocomplete="on"> 
                <h1> Sign up </h1> 
                <p> 
                    <label for="usernamesignup" class="uname" data-icon="u">Your username</label>
                    <input...

CSS

/** fonts used for the icons **/ 
@font-face {
    font-family: 'FontomasCustomRegular';
    src: url('fonts/fontomas-webfont.eot');
    src: url('fonts/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/fontomas-webfont.woff') format('woff'),
         url('fonts/fontomas-webfont.ttf') format('truetype'),
         url('fonts/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'FranchiseRegular';
    src: url('fonts/franchise-bold-webfont.eot');
    src: url('fonts/franchise-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/franchise-bold-webfont.woff') format('woff'),
         url('fonts/franchise-bold-webfont.ttf') format('truetype'),
         url('fonts/franchise-bold-webfont.svg#FranchiseRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}
a.hiddenanchor{
    display: none;
}
/** The wrapper that will contain our two forms **/
#wrapper{
    width: 60%;
    right: 0px;
    min-height: 560px;    
    margin: 0px auto;    
    width: 500px;
    position: relative;    
}
/**** Styling the form elements **/

/**** general text styling ****/
#wrapper a{
    color: rgb(95, 155, 198);
    text-decoration: underline;
}

#wrapper h1{
    font-size: 48px;
    color: rgb(6, 106, 117);
    padding: 2px 0 10px 0;
    font-family: 'FranchiseRegular','Arial Narrow',Arial,sans-serif;
    font-weight: bold;
    text-align: center;
    padding-bottom: 30px;
}
/** For the moment only webkit supports the background-clip:text; */
#wrapper h1{
    background: -webkit-repeating-linear-gradient(-45deg, 
    rgb(18, 83, 93) , 
    rgb(18, 83, 93) 20px, 
    rgb(64, 111, 118) 20px, 
    rgb(64, 111, 118) 40px, 
    rgb(18, 83, 93) 40px);
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}
#wrapper h1:after{
    content: ' ';
    display: block;
    width: 100%;
    height: 2px;
    margin-top:...

JavaScript

$(".to_register").click(function() {
$("#register").show();
});
$(".open").click(function() {
    $("#login").show();
});