JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div id="left">LEFT</div>
<div id="right">RIGHT</div>
<div id="screen">
</div>

CSS

body{overflow:hidden;}
#screen{ width: 600px; height: 400px; background: #000; margin: 50px auto 0 auto;}
#left, #right{ width: 75px; height: 35px; background: #235666; color: #fff; text-align: center;}
#left:hover, #right:hover{cursor: pointer;}

JavaScript

$(function(){
    var screen= $('#screen'),
        left = $('#left'),
        right = $('#right');
    
    left.click(function(){
        screen
            .hide('drop', { 
                direction: 'left',
                complete: function(){
                    $(this).show('drop', { direction: 'right' }, 600)
                }
            }, 600)                

    });
                
    right.click(function(){     
        screen
            .hide('drop', { 
                direction: 'right',
                complete: function(){
                    $(this).show('drop', { direction: 'left' }, 600)
                }            
            }, 600)
    });
});