JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<div id="_panel">
    <div class="max">
        <h3>login</h3>
    </div>
</div>
<div id="_open_close_button">
                <h3 class="_toggle">
                    <a id="_open" href="javascript:void(0)" style="display: inline;">Log in or Sign up</a>
                    <a id="_close" style="display: none;" href="javascript:void(0)">Close Panel</a>
                </h3>
            </div>

CSS

.blur {
    text-shadow: 0px 0px 10px #000000;
}

#_panel {
    display: none;
    background: #032a46;
    color: #65a5d1;
    font-family: litios;
    font-size: 20px;
    margin-bottom: 0px;
}
._Scanu_container {
    margin:auto auto;
    padding: 20px;
    width: 600px;
}
#_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: 28px;
    width: 230px;
    padding-left: 8px;
    font-size:8pt;
}

._input_text:focus{
    outline: none;
}

._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:8pt;
}

._scanu_button:active {
    box-shadow: inset 3px 3px 6px #01121f,  1px 1px 1px #04395e;
}

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

#_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; 
    -moz-border-radius-bottomright: 10px; 
    -khtmlborder-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px; 
    -webkit-border-bottom-left-radius: 10px; 
    -moz-border-radius-bottomleft: 10px; 
    -khtml-border-bottom-left-radius: 10px;
    position: absolute;
    right: 0px;
    bottom: -20px;
    text-align: center;
    z-index: 1;
    line-height: 20px;
    box-shadow: 0px 2px 5px #032A46; 
   ...

JavaScript

$(document).ready(function() {
    // Expand Panel
    $("#_open").click(function(){
        $("div#_panel").slideDown("fast");

        $("#_panel").animate({"height": "+=10px"}, "fast");
        $("#_panel").animate({"height": "-=10px"}, "fast");

        $(".everything").animate({opacity: 0.17}, "fast");
        $(".everything").addClass( "blur" );
        $("#namemail").focus();
    });    
    
    $("#_close").click(function(){

        $("div#_panel").slideUp("fast");
        $(".everything").removeClass( "blur" );
        $(".everything").animate({opacity: 1}, "fast"); 
  });

    $("._toggle a").click(function () {
        $("._toggle a").toggle();
    });
}