JSFiddle - React, Tailwind, and code Playground

HTML

<div id="logincontainer">
<span>Hello there Guest Please </span><a href="#" class="logbut show_hide">Login</a> | <a href="#" class="regbut">Register</a>
</div>
<div class="logbar">
<div class="arrow" style="border-bottom-color: #131313;"></div>
<form action="login.php" class="loginform" method="post">
<input type="hidden" name="action" value="do_login" />
<input type="hidden" name="url" value="{$url}" />
<label>Username: </label>
<input type="text" name="username" value="" class="logbox"/>
<label>Password: </label>
<input type="password" name="password" value="" class="logbox"/>
</span>
<br/>
<input type="submit" class="logbutton" value="Login" tabindex="3" />
<a href="#"> <input type="submit" value="Lost Password" name="submit" class="logbutton" /></a><br />
<label class="smalltext" title="If ticked, your login details will be remembered on this computer, otherwise, you will be logged out as soon as you close your browser."><input type="checkbox" value="yes" checked="checked" name="remember" class="checkbox"> Remember?</label>
</form>
</div>

CSS

#logincontainer {
font-size: 14px;
font-weight: normal;
text-shadow: rgba(35, 172, 16, 0.84) 0px -1px 10px;
color: #FFF;
cursor: pointer;
box-shadow: inset rgba(0, 0, 0, 0.29) 0px 1px 3px, rgba(219, 219, 219, 0.05) 0px 0px 0px 1px, rgba(77, 75, 75, 0.1) 0px 1px 0px;
padding: 15px 20px;
background: #0E0E0E;
border-radius: 3px;
margin-top: 25px;
}

.show_hide {
    display:none;
}
.plus:after {
    content:" +";
}
.minus:after {
    content:" -";
}

.logbar  {
z-index: 500;
position: absolute;
background-color: #111;
padding: 20px;
margin-top: 10px;
    color: #fff;
float: left;
width: 250px;
border: 2px solid #272727;
border-radius: 3px;
box-shadow: -1px 0px 12px rgba(34, 116, 23, 0.19);
}

.regbut {
padding: 7px 9px;
background: #1B5F0A;
border-radius: 3px;
border: 1px solid #2E6B16;
}

.logbutton {
	background: #242424;
	color: #ffffff;	
	text-shadow: 0 0 2px #000;
	border: 1px solid #000;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	padding: 6px 10px;	
	-webkit-box-shadow: rgba(0,0,0,0.5) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-moz-box-shadow: rgba(0,0,0,0.5) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	box-shadow: rgba(0,0,0,0.5) 0px 1px 3px, inset rgba(255,255,255,0.2) 0px 1px 0px, inset rgba(255,255,255,0.1) 0px 0px 0px 1px;
	-moz-background-clip: padding;
	-webkit-background-clip: padding-box;
	text-shadow: 0 0 2px #000;
	font: 11px;
	text-decoration: none;
        cursor: pointer;
}

.logbutton:hover {
	background: #287F12;
}

.logbox {
	background: #1A1A1A;
        padding: 5px;
	border: 1px solid #2C2C2C;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	color: #f7f7f7;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
}

.logbox:focus {
        border: 1px solid #4CAD2D;
        outline: none;
        color: #fff;
}

#logincontainer a:link, #logincontainer a:visited {
	color:...

JavaScript

jQuery(document).ready(function($){
  $(".logbar").hide();
  $(".logbut").addClass("plus").show();
  $('.logbut').toggle(
      function(){
          $(".logbar").slideDown().slideToggle("fast");
          $(this).addClass("plus");
          $(this).removeClass("minus");
      },
      function(){
          $(".logbar").slideUp().slideToggle("fast");
          $(this).addClass("minus");
          $(this).removeClass("plus");
      }
  );
});