JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class="xboxwrap1 rap xboxwrap">
        <div class="boxs panel1"></div>
    </div>
    <div class="xboxwrap2 rap xboxwrap">
        <div class="boxs panel2"></div>
    </div>
    <div class="xboxwrap3 rap xboxwrap">
        <div class="boxs panel3"></div>
    </div>

CSS

.wrapper {
	position:relative;
	overflow:hidden;
	height:200px;
	width:600px;
}
	.boxs {
		width:600px;
		height:200px;
		border:1px solid #ccc;
		position:absolute;
		left:0px;
		top:0px;
	}
	
	.panel1 {
		background-color:blue;
	}
	.panel2 {
		background-color:red;
		left:-200px;
	}
	.panel3 {
		background-color:yellow;
		left:-400px;
	}
	
	.xboxwrap {
		width:200px;
		overflow:hidden;
		position:absolute;
		height:200px;
	}
	
	.xboxwrap1 {
		left:0px;
	}
	
	.xboxwrap2 {
		left:200px;
	}
	
	.xboxwrap3 {
		left:400px;
	}

JavaScript

$('.rap').each(function () {

    $(this).click(function () {
        $(this).addClass('selected');
        $(this).removeClass('rap')
        $(this).animate({
            'left': 0,
                'width': '600px'
        });
        $(this).css('z-index', '10');
        $(this).find('.boxs').animate({
            'left': 0
        });
    });
});


$('.selected').live("click", function () {
    alert('s');
    $(this).removeClass('selected');
    $(this).addClass('rap');
    $(this).parent().animate({
        'left': '200px',
            'z-index': 0,
            'width': '200px'
    });

    $(this).animate({
        'left': '-200px'
    });
});