JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<div id="left">
    <a href="#pv-signin" class="panel">SignIn</a><br/>
    <a href="#pv-signup" class="panel">SignUp</a><br/>
</div>
<div id="right">
    <div class="panel" id="pv-signin" style="background:green">Sign In</div>
    <div class="panel" id="pv-signup" style="background:red">Sign Up</div>
</div>

CSS

div.panel {
    position: absolute;
    height: 100%;
    width: 100%;
    display: none;
}

JavaScript

jQuery(function ($) {
        $('#pv-signin').addClass('active').show();
        $('a.panel').click(function () {
            var $target = $($(this).attr('href')),
                $other = $target.siblings('.active');

            if (!$target.hasClass('active')) {
                $other.each(function (index, self) {
                    var $this = $(this);
                    $this.removeClass('active').animate({
                        left: $this.width()
                    }, 500);
                });

                $target.addClass('active').show().css({
                    left: -($target.width())
                }).animate({
                    left: 0
                }, 500);
            }
        });
    });