JSFiddle - React, Tailwind, and code Playground

HTML

<div class="auth reg">
    <div class="registration">
        <h1>REGISTRATION FORM</h1>
        <label><input type="text"> Login</label>
        <label><input type="password"> Password</label>
        <label><input type="password"> Password 2</label>
    </div>
    <div class="login">
        <h1>LOGIN FORM</h1>
        <label><input type="text"> Login</label>
        <label><input type="password"> Password</label>
    </div>
    <div class="controls">
        <div id="showLogin" class="btn">Show login</div>
        <div id="showReg" class="btn">Show registration</div>
    </div>
</div>

CSS

.auth .btn {
    float: left;
    padding: 5px 10px;
    margin: 3px;
    background: gray;
    color: white;
    font-weight: bold;
    cursor: pointer;
}
.auth > div { height: 200px; }
.auth > div label { display: block; }
.auth .registration { display: none; }
.auth .login { display: block; }
.auth.reg .registration { display: block; }
.auth.reg .login { display: none; }

JavaScript

$('#showLogin').on('click', ()=>$('.auth').removeClass('reg'))
$('#showReg').on('click', ()=>$('.auth').addClass('reg'))