JSFiddle - React, Tailwind, and code Playground

by Evgeniy Lukovsky

HTML

<div id="playground">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

#playground {
    background-color:red;
    position:absolute;
    height: 40px;
    width: 100%;
}
#playground>div {
    position: relative;
    height: 10px;
    width:10px;
    background:url(http://www.freegreatpicture.com/files/146/26189-abstract-color-background.jpg);
    transition: all ease-in-out 1s;
}

JavaScript

var playground = document.getElementById('playground');

var x = y = 400;
setTimeout(function () {
    playground.children[0].style.left = x + 'px';
    playground.children[1].style.WebkitTransform = 'translateX(' + x + 'px)';
    playground.children[2].style.WebkitTransform = 'translate3d(' + x + 'px,0,0)';
    playground.children[3].scrollLeft = x+'px';
}, 10);