JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<div class="left">
	<form action="login.php" method="post">
	<label >nickname</label>
	<input  type="text" name="username" value=""></INPUT>


	<label>password</label>
	<input  type="password" name="password" value="" border="2"></INput>
	<br>
	<br>

<input type="submit" name="reponse" value="sign-in" onclick="window.location.reload()" ></input>
<input type="reset" name="reponse" value="cancel"></input>

<h3><div id="inner"><p   align="left">have no acount yet?! please <a href="#content1">sign_up</a>
</P>
</h3></div>
</form>
</div>


<p   class="regp" align="center"> sign up below </p>
<FORM name="form1" action="" method="post">
<div class="fieldset" id="content1" style=" display:none ">
<fieldset class="f1">
	<label class="label">Username*</label><br>
	<input  class="input" type="text" name="username" value=""></INPUT>
</fieldset>
<fieldset>
	<label class="label">Password*</label><br>
	<input  class="input" type="text" name="password" value=""></INput>
</fieldset>

<fieldset class="f1">
	<label class="label">Password again*</label><br>
	<input  class="input" type="text" name="password_again" value=""></INPUT>
</fieldset>
<fieldset class="f1">
	<label class="label">First name*</label><br>
	<input  class="input" type="text" name="first_name" value=""></INPUT>
</fieldset>
<fieldset class="f1">
	<label class="label">Last name*</label><br>
	<input  class="input" type="text" name="last_name" value=""></INPUT>
</fieldset>
<fieldset>
	<label class="label"> E-MAIL*</label><br>
	<input class="input" type="text" name="email" value=""></INPUT>
</fieldset>



		<input  class="input" type="submit" name="reponse" value="sign-up" ></input>
<input class="input" type="reset" name="reponse" value="cancel"></input>
</div>
</form>
</body>

JavaScript

$("#inner a").click(function(e){
    e.preventDefault();
    $(".fieldset").hide();
    var toShow = $(this).attr('href');
    $(toShow).show();
	
});