JSFiddle - React, Tailwind, and code Playground

HTML

<a id="login-slide" href="#">Login</a>
<a id="user-slide" href="#">New user</a>
<a class="lab-key-continue-btn" href="#">Continue - New user</a>


<div id="login-box"></div>
<div id="user-box"></div>

CSS

.selected {background-color:#567;}

#login-box {width:200px; height:200px; background-color:#F60;}
#user-box {width:200px; height:200px; background-color:#567; display:none;}

JavaScript

$('#login-slide').click(function (e) {
        e.preventDefault();
        if (!$(this).hasClass("selected")) {
            $('#user-box').slideUp(function () {
                $('#login-slide').addClass('selected');
                $('#user-slide').removeClass('selected');
                $('#login-box').slideDown();
            });
        }
    });

    $('#user-slide, .lab-key-continue-btn').click(function (e) {
        e.preventDefault();
        if (!$(this).hasClass("selected")) {
            $('#login-box').slideUp(function () {
                $('#user-slide').addClass('selected');
                $('#login-slide').removeClass('selected');
                $('#user-box').slideDown();
            });
        }
    });