JSFiddle - React, Tailwind, and code Playground

by Andrea Scanu

HTML

<div id="panel" style="display:none;">
    <form action="index.php?login/login" method="post">
    <div class="Scanu_container">
        <div class="clear_both">
            <a style="float: left;">Your name or email address:</a>
            <input style="float: left; margin-left: 35px;" type="text" class="input_text">
        </div>
        <div class="clear_both">
            <a style="float: left; margin-top: 5px;">Do you already have an account?</a>
            <ul>
                <div style="float: left; margin-left: 10px; margin-top: 5px;">
                    <li><label><input class="hide" name="registered" type="radio" value="1">
                        No, create an account now.</label></li>
                    <li><label><input type="radio" name="registered" value="0" checked="checked" class="show"> Yes, my password is:</label></li>
                    <li><input type="password" style="margin-top: 5px;" class="input_text" id="scanu_password"></li>
                </div>
                <div style="clear: both;"></div>
                <a class="lostPassword" href="index.php?lost-password/">Forgot your password?</a>
            </ul>
        </div>
            <br />
            <input type="submit" id="register_button" style="display:none;" class="scanu_button" value="Sign up">
            <input type="submit" id="login_button" class="scanu_button" value="Log in">
            <label class="stay_logged"><input type="checkbox" value="1"> Stay logged in 
            </label></div></form></div>
            <div id="open_close_button">
                <h3 class="toggle">
                    <a id="open" href="#">Log In | Register</a>
                    <a id="close" style="display: none;" href="#">Close Panel</a>
                </h3>
            </div>

<h3 class="toggle">
    <a id="open">open</a>
    <a id="close" style="display:none;">close</a>
</h3>

CSS

#panel {
    background: #032a46;
    color: #65a5d1;
    font-family: litios;
    font-size: 20px;
}

.Scanu_container {
    margin:auto auto;
    padding: 20px;
    width: 600px;
}

@font-face {
    font-family: 'litios';
    src: url('http://localhost/litios-regular.otf');
    src: local('litios'), local('litios'), url('http://localhost/litios-regular.otf') format('truetype');
}

.clear_both {
    clear: both;
}

.lostPassword {
   opacity: 0.5;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
 
.lostPassword:hover {
      opacity: 1;
}

#panel a:link, #panel a:visited, #panel a:hover, #panel a:active {

    color: #65a5d1;
    text-decoration: none;

}

.input_text {
    background: #021f33;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #65a5d1;
    box-shadow: inset 3px 3px 6px #01121f, 1px 1px 1px #04395e; 
    border: none;
    height: 23px;
    width: 200px;
}

.scanu_button {
    background: #021f33;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #65a5d1;
    box-shadow: 2px 2px 6px #01121f, inset 3px 3px 10px #04395e;
    border: none;
    padding: 5px;
    margin-right: 10px;
    cursor: pointer;
    font-size:12pt;
}

.scanu_button:active {
    background: #021f33;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    color: #65a5d1;
    box-shadow: inset 3px 3px 6px #01121f,  1px 1px 1px #04395e;
    border: none;
    padding: 5px;
    margin-right: 10px;
    cursor: pointer;
}

#open_close_button{
    background-color: #032A46;
    border-bottom: 1px solid #65a5d1;
    position: relative;
    z-index: 1;
    height: 7px;
}

#open_close_button .toggle {
    font-size: 16px;
    font-family: litios;
    color: #65a5d1;
    background-color: #032A46;
    text-decoration: none;
    padding: 0 5px;
    margin-right: 20px;
    border-bottom-right-radius: 10px; 
    -webkit-border-bottom-right-radius: 10px;...

JavaScript

$(document).ready(function() {
    
    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("fast");
        $("#panel").animate({"height": "+=10px"}, "fast");
        $("#panel").animate({"height": "-=10px"}, "fast");
    });    
    
    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("fast");
          
  });
     
        // Switch buttons from "Log In | Register" to "Close Panel" on click
    $(".toggle a").click(function () {
        $(".toggle a").toggle();
    });

    
     // Hide log in options
        $(".hide").change(function(){
            $("#scanu_password,.lostPassword").slideUp("fast");
            $(".stay_logged").fadeOut("fast");
            $("#panel").animate({"height": "-=62px"}, "fast");
            $("#register_button").show();
            $("#login_button").hide();
    });
    
      // Show log in options
    $(".show").change(function(){
        $("#scanu_password,.lostPassword").slideDown("fast");
        $(".stay_logged").fadeIn("fast");
        $("#panel").animate({"height": "+=62px"}, "fast");
        $("#register_button").hide();
        $("#login_button").show();
  });

        
});