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>

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();
    });


});