JSFiddle - React, Tailwind, and code Playground

by kachibito

HTML

<div id="maki">
    <div class="box1 box"><img src="http://farm4.staticflickr.com/3531/3873059255_016fe805d9.jpg" /></div>
    <div class="box2 box"><img src="http://farm3.staticflickr.com/2636/4090755093_ce5921f04a.jpg" /></div>
    <div class="box3 box"><img src="http://farm7.staticflickr.com/6024/5950842052_8498857af9.jpg" /></div>
    <div class="box4 box"><img src="http://farm5.staticflickr.com/4036/4719025385_61937f8652.jpg" /></div>
    <div class="box5 box"><img src="http://farm5.staticflickr.com/4012/4248892891_d2d8c63692.jpg" /></div>
</div>
 
<div id="wrap">Photo by <a href="http://www.flickr.com/photos/arcticpuppy/sets/72157625072844296/">Chris's</a> CC-BY</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: 50%;
    left: 150%;
    top: 0px;
    margin-left: -25%;
    height: 300px;
    cursor: pointer ;
    line-height: 300px;
    font-size: 50px;
    text-align: center;
}

img{max-width: 100% ;height:auto;}

.box1 {
    left: 50%;
}


/*Media Queries*/
/* Smartphones (portrait and landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
 
/* Smartphones (landscape)  */
@media only screen
and (min-width : 321px) {
}
 
/* Smartphones (portrait)  */
@media only screen
and (max-width : 320px) {
}
 
/* iPad (portrait and landscape)  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
 
/* iPads (landscape)  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
 
/* iPad (portrait)  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
 
/* Desktop and laptop  */
@media only screen
and (min-width : 1224px) {
}
 
/* Large screens  */
@media only screen
and (min-width : 1824px) {
}
 
/* iPhone 4  */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

JavaScript

$('.box').click(function() {

    $(this).animate({
        left: '-50%'
    }, 500, function() {
        $(this).css('left', '150%');
        $(this).appendTo('#maki');
    });

    $(this).next().animate({
        left: '50%'
    }, 500);
});