JSFiddle - React, Tailwind, and code Playground

HTML

<form name="signInForm" id="signInForm" action='/echo/html/'> <!--demo action-->
            <section id="signInSection">
                <input class="large" type="text" placeholder="username"/><br>
                <input class="large" type="password" placeholder="password"><br>    
                <button id="signinbtn" class="small">Sign In</button><br>
                <label><input type="checkbox"/>Remember me.</label>
                <a href="#">Reset Password</a>
                <img src="../images/cancel.jpg" alt="Cancel Sign In">   
            </section>
        </form>

JavaScript

$('#signinbtn').on('click', function (e) {
     e.preventDefault();
    $('#signInSection').fadeOut(200);       
    $('#signedInSection').fadeIn(200);
    $('.signUp').fadeOut(1);
    $('.signIn').closest('header').find('input').fadeIn(200);
    $('#memberToolBarSection').fadeIn(1500);
    $('#contents').fadeIn(1500);
    $("#signInForm").submit();
});