JSFiddle - React, Tailwind, and code Playground

HTML

<!-- PNG FIX for IE6 -->
      <!-- http://24ways.org/2007/supersleight-transparent-png-in-ie6 -->
    <!--[if lte IE 6]>
        <script type="text/javascript" src="localhost/slide/js/pngfix/supersleight-min.js"></script>
    <![endif]-->
     
    <!-- jQuery - the core -->
    <script src="http://localhost/slide/js/jquery-1.3.2.min.js" type="text/javascript"></script>



<!-- Panel -->
    <div id="panel" style="display:none;">     
         <form action="index.php?login/login" method="post" class="xenForm " id="login">

    

    <div class="ctrlWrapper">
        <dl class="ctrlUnit">
            <dt><label for="LoginControl" style="float: left;">Your name or email address:</label></dt>
            <dd><input style="float: left; margin-left: 35px;" type="text" name="login" id="LoginControl" class="textCtrl" tabindex="101"></dd>
        </dl>
        
    
    
        <dl class="ctrlUnit">
            <dt>
                <label for="ctrl_password" style="float: left; margin-top: 5px;">Do you already have an account?</label>
            </dt>
            
            <dd>
                <ul>
                    <div style="float: left; margin-left: 10px; margin-top: 5px;">
                    <li><label for="ctrl_not_registered"><input class="hide"  type="radio" name="register" value="1" id="ctrl_not_registered" tabindex="105">
                        No, create an account now.</label></li>
                    <li><label for="ctrl_registered"><input type="radio" name="register" value="0" id="ctrl_registered" tabindex="105" checked="checked" class="show">
                        Yes, my password is:</label></li>
                     <li id="ctrl_registered_Disabler">
                         <div style="margin-top: 5px;"><input type="password" name="password" class="textCtrl" id="ctrl_password" tabindex="102"></div>
                    </li>
                </div>
                    <div style="clear: both;"></div>
                    
                   ...

CSS

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

.ctrlWrapper {
    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');
}

.ctrlUnit {
    clear: both;
}

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

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

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

}

.textCtrl {
    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;
}

.Disabler {
    background: #000;

}

.button-panel {
    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;
}

.button-panel: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;
}

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

#loginBar #loginBarHandle {
    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").click(function(){
            $("#ctrl_password,.lostPassword").slideUp("fast");
            $(".rememberPassword").fadeOut("fast");
            $("#panel").animate({"height": "-=65px"}, "fast");
            $("#signup1").show();
            $("#login1").hide();
    });
    
      // Show log in options
    $(".show").click(function(){
        $("#ctrl_password,.lostPassword").slideDown("fast");
        $(".rememberPassword").fadeIn("fast");
        $("#panel").animate({"height": "+=65px"}, "fast");
        $("#signup1").hide();
        $("#login1").show();
  });

        
});