JSFiddle - React, Tailwind, and code Playground

by anaketa

HTML

<header></header>
<div id="toppanel" class="closed">
    <div class="panel-content">
        <div id="login-tab">
            <h3>LOGIN</h3>
            <p>Ciaooo io sono il login form!!!</p>
            <input type="text" />
        </div>
        <div id="signup-tab">
            <h3>SIGN UP</h3>
            <p>Ciaooo io sono il login form!!!</p>
            <input type="text" />
        </div>
    </div>
    <ul class="tab-buttons">
        <div class="buttons-expanded">
            <li data-classname="login" class="login"><a>Login</a></li>
            <li data-classname="closed" class="close"><a>Close</a></li>
            <li data-classname="signup" class="signup"><a>Sign up</a></li>
        </div>
    </ul>
</div>

CSS

header {
    width: 100%;
    background: #444;
    height: 30px;
    position: relative;
}

#toppanel{
    background: blue;
    width: 200px;
    position: absolute;
    top: 35px;
    margin: 0 auto;
    text-align: center;
}
.panel-content {
    position: relative;
    top: 5px;
    width: 200px;
    overflow: hidden;
    height: 0px;
    background: #444;
}

hidden { 
    display: none;
}

body {
    color: #fff;
}

li{
    display: inline;
}
.login {
     padding: 5px 0;
}
a {
    color: #fff;
}

/* regole di stato */
#toppanel.closed #login-tab, #toppanel.closed #signup-tab,
#toppanel.closed li.close {
    display: none;
}

#toppanel.login #signup-tab, 
#toppanel.login li.login  {
  display: none;
}

#toppanel.signup #login-tab,
#toppanel.signup li.signup {
    display: none;
}

JavaScript

$(document).ready(function(){
    $("ul li a").click(function(){
        $(".panel-content").animate({height: "200px"}).animate({height: "100px"}, "fast");
    });
    
    $('.tab-buttons li').click(function(evt){
        var $target = $(evt.currentTarget);
        $('#toppanel')[0].className = $target.data('classname');
        if($target.hasClass('close')) {
           $(".panel-content").animate({height: "0px"});
        }
    });
    
    /*
    $('.tab-buttons li.login').click(function(evt){
         $('#toppanel')[0].className = "login";
    });
    $('.tab-buttons li.signup').click(function(evt){
         $('#toppanel')[0].className = "signup";
    });
    $('.tab-buttons li.close').click(function(evt){
         $('#toppanel')[0].className = "closed";
         $(".panel-content").animate({height: "0px"});
    });
    */
});