JSFiddle - React, Tailwind, and code Playground

by anaketa

HTML

<script src="http://weloveiconfonts.com/api/?family=fontawesome|typicons"></script>
<header>
    <ul class="menu">
        <li><p class="logo"></p></li>
        <li><a>Explore</a></li>
        <li><a>Help</a></li>
        <li><a>Blog</a></li>
    </ul>
    <input class="search" type="text" placeholder="Search.."/>
</header>
<div id="toppanel" class="closed">
    <div class="panel-content">
        <div id="login-tab">
            <form id="form-login">
            <ul>
                <li><input id="email" type="text" placeholder="Email"/></li>
                <li><input id="psw" type="password" placeholder="Password" /></li>
                <li><button id="submit">Login</button></li>
            </ul>
            <ul class="remember-option">
                <li><input id="remindme" type="checkbox" /> Remember me</li>
                <li class="forgot"><a href="#">forgot it?</a></li>
            </ul>
            </form>
            <hr>
            <p>Or connect with</p>
            <ul class="social">
                <li><button>Login with Twitter</button></li>
                <li><button>Login with Facebook</button></li>
                <li><button>Login with Google</button></li>
            </ul>
        </div>
        <div id="signup-tab">
            <form id="form-signup">
            <ul>
                <li><input data-validation-type="email" class="email" type="text" placeholder="Email"/></li>
                <li><input data-validation-type="notEmpty" type="password" placeholder="Password" /></li>
                <li><input data-validation-type="notEmpty"type="password" placeholder="Repeat Password" /></li>
                <li><button>Sign up</button></li>
            </ul>
            </form>
            <ul class="remember-option">
                <li><input type="checkbox" /> I agree with the term and conditions</li>
            </ul>
            <hr>
            <p>Or connect with</p>
            <ul class="social">
                <li><button>Login...

CSS

header {
    width: 100%;
    background: #272727;
    height: 40px;
    position: relative;
}

#toppanel{
    background: #272727;
    width: 150px;
    position: relative;
    margin: 0 auto;
    text-align: center;
    float: right;
    right: 50px;
    border-radius: 0 0 10px 10px;
}
.panel-content {
    position: relative;
    top: 5px;
    height: 0px;
    background: #272727;

}

body {
    color: #fff;
    font-family: Georgia;
    font-size: 0.9em;
    font-style: italic;
    margin: 0;
    padding: 0;
}
ul, li, p { margin: 0; padding: 0; }
li{ display: inline; }
a { color: #fff; text-decoration: none; }
a:hover {color: #47a1f4; }

header ul {
    padding: 12px 0 5px 35px; 
}

header ul li{
    margin-left: 5px; 
}

header ul li p{
    float: left;  
}

.menu {
    width: 185px;
    display: inline-block;
}

.logo {
    border-radius: 50%;
    height: 20px;
    width: 20px;
    background: #e03338;
    margin-top: -2px;
}

.search {
    border-radius: 4px;
    box-shadow: -1px -1px 2px #7c7c7c;;
    -moz-box-shadow: -1px -1px 2px #7c7c7c;;
    -webkit-box-shadow: -1px -1px 2px #7c7c7c;
    border: none;
    width: auto;
    margin: 9px 56px 0 0;
    float: right;
    
}
.remember-option {
    font-size: 0.7em;
    text-align: left;
}

.remember-option input {
    width: auto;
}

.remember-option li {
    margin: 0 18px
}

.remember-option li.forgot {
    margin-left: 28px
}

hr {
    width: 88%;
    text-align: center;
    color: #47a1f4; /*IE*/ 
    background-color: #47a1f4;/*FF,Opera*/
    border-color: #47a1f4;/*Chrome, Safari*/
}

input {
   width: 33%;
    margin: 0 3px;
    border-radius: 4px;
    border: 0px;
    padding: 3px;
}
::-webkit-input-placeholder{
    color: #393939;
    font-family: Georgia;
    font-style: italic;
}
:-moz-placeholder { 
    color: #393939;
    font-family: Georgia;
    font-style: italic;
}
::-moz-placeholder { 
    color: #393939;
    font-family: Georgia;
    font-style: italic;
}
:-ms-input-placeholder { 
   ...

JavaScript

$(document).ready(function(){
    $("#toppanel li").click(function(){
        $("#toppanel").stop().animate({
            height: "167px", width: "345px"
        })
        $(".panel-content").stop().animate({
            height: "125px"
        })

    });

    $('.tab-buttons li.login').click(function(e){
        $('#toppanel')[0].className = 'login';
    });
     $('.tab-buttons li.signup').click(function(e){
        $('#toppanel')[0].className = 'signup';
    });
     $('.tab-buttons li.close').click(function(e){
         $("#toppanel").stop().animate({height: "45px", width: "150px"}, 'fast');
         $(".panel-content").stop().animate({height: "0px"
       }, 'fast');
        $('#toppanel')[0].className = 'closed';
    });

});