JSFiddle - React, Tailwind, and code Playground

HTML

<title>Slides Demo</title>


    <link rel="stylesheet" type="text/css" media="screen" href="slide1.css"  />
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
    <script type="text/javascript" src="slide1.js" ></script>
	
<body>

<!-- Panel -->
	<div id="toppanel">
        <div id="panel">
                <div class="content clearfix">
						<div class="left">
								<!-- Login Form -->
								<form class="clearfix" action="" method="post">
										<h1>Member Login</h1>
										<h2> Display the </h2><h2>Login form here </h2>	

								</form>
								
						</div>

				</div>
		</div> <!-- /login -->
		
    <!-- The tab on top -->
        <div class="tab">
                <ul class="login">
                    <li class="left">&nbsp;</li>
					<li>Hello Guest!</li>
                        <li class="sep">|</li>
                        <li id="toggle">
                                <a id="open" class="open" href="#"> Log In | Register</a>
								<!-- to rectify the slide flaw insert style="display:none"; just before class="close" and search and remove /* FLAW */ block from css -->
                                <a id="close" class="close" href="#">Close Panel</a>	
                        </li>
                    <li class="right">&nbsp;</li>
                </ul>
        </div> <!-- / top -->

	</div> <!--panel -->
</div>

</body>

CSS

/*
Name: Sliding Login Panel with jQuery 1.3.2
Author: Jeremie Tisseau
Author URI: http://web-kreation.com/
Script URI: http://web-kreation.com/index.php/tutorials/nice-clean-sliding-login-panel-built-with-jquery/
Date: March 26, 2009
Version: 1.0

        The CSS, XHTML and design is released under Creative Common License 3.0:
        http://creativecommons.org/licenses/by-sa/3.0/
*/ 


/***** clearfix *****/
.clear {clear: both;height: 0;line-height: 0;}
.clearfix:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
.clearfix {height: 1%;}
.clearfix {display: block;}

/* Panel Tab/button */

.tab {
        /* background: url(images/tab_b.png) repeat-x 0 0; */
		background-color:orange;
        height: 42px;
        position: relative;
        top: 0;
        z-index: 999;
}

.tab ul.login {
		display: block;
		position: relative;
		float: right;
		clear: right;
		height: 42px;
		width: auto;
		font-weight: bold;
		line-height: 42px;
		margin: 0;
		right: 150px;
		color: white;
		font-size: 12px;
		text-align: center;
		background-color: olive;
}

.tab ul.login li.left {
	/*	background: url(images/tab_l.png) no-repeat left 0;	*/
		background-color: red;	
		height: 42px;
		width: 30px;
		padding: 0;
		margin: 0;
		display: block;
		float: left;
}

.tab ul.login li.right {
          /* background: url(images/tab_r.png) no-repeat left 0; */
		  background-color: red;
          height: 42px;
          width: 30px;
          padding: 0;
          margin: 0;
          display: block;
          float: left;
}

.tab ul.login li {
		text-align: left;
		padding: 0 6px;
		display: block;
		float: left;
		height: 42px;
		background-color: blue;
		/*	background: url(images/tab_m.png) repeat-x 0 0; */
}

.tab ul.login li a {
        color: #15ADFF;
}

.tab ul.login li a:hover {
        color: white;
}

.tab...

JavaScript

$(document).ready(function() {

	var isMenuOpen = false;
	
	// Expand Panel
	$("#open").click(function() {
		$("div#panel").slideDown("slow");
    isMenuOpen = true;
    
    $('#close').css('display','block');
    $('#open').css('display','none');
	});	
	
	// Collapse Panel
	$("#close").click(function(){
		$("div#panel").slideUp("slow");
    
    isMenuOpen = false;
    
    $('#close').css('display','none');
    $('#open').css('display','block');
	});
  

  
	
  /*
	// Switch buttons from "Log In | Register" to "Close Panel" on click
	$("#toggle a").click(toggleText);
  
  function toggleDisplay() {
  	var state = $('#close').css('display');
    
		if (state === 'none') {
    	$('#close').css('display','block');
    } else {
    	$('#close').css('display','none');
    }
  }
  toggleDisplay();
  
  function toggleText() {
		$("#toggle a").toggle();
    toggleDisplay();
	}
  */
  
});