JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
    <div id="panel1a" class="panel1">Panel1a</div>
    <div id="panel2a" class="panel2">Panel2a</div>
</div>

<div class="wrap">
    <div id="panel1b" class="panel1">Panel1b</div>
    <div id="panel2b" class="panel2">Panel2b</div>
</div>

CSS

* { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; }

body {
    background: #000;
    padding: 20px;
    font: 20px arial;
}

.wrap {
    position: relative;
    overflow: hidden;
    margin: 0 0 20px 0;
}

.panel1 {
    background: #f00;
    width: 100%;
    height: 80px;
    padding: 20px;
    -webkit-transform: translate3d( 0, 0, 0 );
    transform: translate3d( 0, 0, 0 );
    cursor: pointer;
}

.panel2 {
    background: #00f;
    width: 100%;
    height: 80px;
    padding: 20px;
    margin: -80px 0 0 0;
    -webkit-transform: translate3d( 100%, 0, 0 );
    transform: translate3d( 100%, 0, 0 );
    cursor: pointer;
}
.animate {
    -webkit-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.right {
    -webkit-transform: translate3d( 100%, 0, 0 );
    transform: translate3d( 100%, 0, 0 );
}

.left {
    -webkit-transform: translate3d( -100%, 0, 0 );
    transform: translate3d( -100%, 0, 0 );
}

.center {
    -webkit-transform: translate3d( 0, 0, 0 );
    transform: translate3d( 0, 0, 0 );
}

JavaScript

$('#panel1a').on('click',function(){
    $(this).addClass('animate');
    $(this).toggleClass('right');
    $('#panel2a').addClass('left');
    $('#panel2a').addClass('animate');
    $('#panel2a').addClass('center');
});

$('#panel1a').on('webkitTransitionEnd transitionend',function(e){
    $('#panel1a, #panel2a').removeClass('right left animate center');
});


$('#panel1b').on('click',function(){
    $(this).addClass('animate');
    $(this).toggleClass('right');
    $('#panel2b').addClass('left');
    
    setTimeout(function(){
        $('#panel2b').addClass('animate');
        $('#panel2b').addClass('center');
    },10);
});

$('#panel1b').on('webkitTransitionEnd transitionend',function(e){
    $('#panel1b, #panel2b').removeClass('right left animate center');
});