JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
  <div id="box">
    <div id="log_in">
      <p>LOG IN FORM</p>
      <p>LOG IN FORM</p>
      <p>LOG IN FORM</p>
      <p>LOG IN FORM</p>
      <p>LOG IN FORM</p>
      <div id="forgot">Forgot password?</div>
    </div>
    <div id="forgot_form">
     <p>FORGOT FORM</p>
     <p>FORGOT FORM</p>
     <p>FORGOT FORM</p>
  </div>
</div>

</div>

CSS

#content{
  background-color: blue;
  width:100%;
  height:900px;
}
#box{
    width: 200px;
  position: relative; 
  top: 20px; 
  left: 14px; 
  display: block;
  border:2px solid red;
   background-color: white;
   padding: 5px;
}
#log_in{

}
#forgot{
  cursor: pointer;
  color: blue;
}
#forgot_form{
   
}

JavaScript

$(document).ready(function () {
	$("#forgot_form").css({'display':'none'});
    $("#forgot").on("click", function () {
        $("#log_in").css({'display':'none'});
        $("#forgot_form").css({'display':'block'});
        $("#forgot_form").css({"left":"200px"}).animate({"left":"0px"}, "slow");
    });
});