JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="maki">
    
    <div class="box1 box">Div</div>
    <div class="box2 box">Div</div>
    <div class="box3 box">Div</div>
    <div class="box4 box">Div</div>
    <div class="box5 box">Div</div>
    
</div>
 
    <div id="wrap">
        Other content</div>

CSS

body {
    padding: 0px;    
}
        
#wrap{margin-left:100px;}
#maki {
    overflow: hidden;
    position: relative;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 320px;
      top:0;left:0;
    color: #e8ded2 ;
}

.box {
    position: absolute;
    width: 100%;
    height: 300px;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
    border: 1px solid #ddd;
    left: 100%;
    top: 0px;
    margin-left: -0;
    cursor: pointer ;
}

.box1 {
    background-color: #96b3c3;
    left: 0;
}

.box2 {
    background-color: #dc7878;
}

.box3 {
    background-color: #a8c398;
}

.box4 {
    background-color: #bc92b6;
}

.box5 {
    background-color: #dab475;
}

JavaScript

$('.box').click(function() {
    var $t = $(this);
    $t.animate({
        left: '-100%'
    }, 500, function() {
        $t.css('left', '100%');
        $t.appendTo('#maki');
    });

    $t.next().animate({
        left: '0%'
    }, 500);
});