JSFiddle - React, Tailwind, and code Playground

by bighostkim

HTML

<div id="container" style="position:relative;height:200px;">
    <div id="a">1</div>
    <div id="b">2</div>
    <div id="c">3</div>
    <div id="d">4</div>
    <div id="e">5</div>
    <div id="f">6</div>
</div>
<br/>
<br/>
<br/>
<a id="left" href="#">left</a>
<a id="right" href="#">right</a>

CSS

div > div {
    position:absolute;
    background:#fff;
    border: 1px solid black;
    width: 200px; height: 200px;
}
div#a {
    transform: rotate(5deg);
    -ms-transform: rotate(5deg); /* IE 9 */
    -webkit-transform: rotate(5deg); /* Safari and Chrome */
    -mozilla-transform: rotate(5deg); /* Safari and Chrome */
    left: 5px;
}
div#b {
    transform: rotate(1deg);
    -ms-transform: rotate(1deg); /* IE 9 */
    -webkit-transform: rotate(1deg); /* Safari and Chrome */
    -mozilla-transform: rotate(1deg); /* Safari and Chrome */
    left: 10px;
}
div#c {
    transform: rotate(6deg);
    -ms-transform: rotate(6deg); /* IE 9 */
    -webkit-transform: rotate(6deg); /* Safari and Chrome */
    -mozilla-transform: rotate(6deg); /* Safari and Chrome */
    left: 7px;
}
div#d {
    transform: rotate(4deg);
    -ms-transform: rotate(4deg); /* IE 9 */
    -webkit-transform: rotate(4deg); /* Safari and Chrome */
    -mozilla-transform: rotate(4deg); /* Safari and Chrome */
}
div#e {
    transform: rotate(3deg);
    -ms-transform: rotate(3deg); /* IE 9 */
    -webkit-transform: rotate(3deg); /* Safari and Chrome */
    -mozilla-transform: rotate(3deg); /* Safari and Chrome */
    left: 1px
}
div#f {
    transform: rotate(2deg);
    -ms-transform: rotate(2deg); /* IE 9 */
    -webkit-transform: rotate(2deg); /* Safari and Chrome */
    -mozilla-transform: rotate(2deg); /* Safari and Chrome */
}

JavaScript

$("#left").click( function() {
    $('div#container div:first').appendTo('div#container');
});
$("#right").click( function() {
    $('div#container div:last').prependTo('div#container');
});