JSFiddle - React, Tailwind, and code Playground

by mynameisdonald

HTML

<body>
    <div id="cd">
    <div id="cd6">6</div>
    <div id="cd5">5</div>
    <div id="cd4">4</div>
    <div id="cd3">3</div>
    <div id="cd2">2</div>
    <div id="cd1">1</div>
    </div>
</body>

CSS

#cd1 {
    left: 0px;
}
#cd2 {
    left: 40px;
}
#cd3 {
    left: 80px;
}
#cd4 {
    left: 120px;
}
#cd5 {
    left: 160px;
}
#cd6 {
    left: 200px;
}

JavaScript

var cds = ['#cd1', '#cd2', '#cd3', '#cd4', '#cd5', '#cd6'];
var pos_init = ['0', '40', '80', '120', '160', '200'];
$("#cd div").each(function(i) {
    $(cds[i]).hover(
        function() {
            var esquerda = parseInt(pos_init[i]);
            $(this).animate({left: (esquerda + 35) + 'px'}, 'slow');
            $(this).css({'-webkit-transform' : 'rotate(45deg)'});
        },
        function() {
            var esquerda = parseInt(pos_init[i]);
            $(this).animate({left: (esquerda) + 'px'}, 'slow');
            $(this).css({'-webkit-transform' : 'rotate(0deg)'});
        }
    );
});