JSFiddle - React, Tailwind, and code Playground

by smash120

HTML

<div id="cloud-holder"><div style='left: -122px; top: 90px; width: 297px; height: 216px; z-index: 2; background-image: url("http://esiema.de/img/cloud-1.png");' class="cloud"></div><div style='left: 889px; top: 110px; width: 93px; height: 43px; z-index: 2; background-image: url("http://esiema.de/img/cloud-2.png");' class="cloud"></div><div style='left: 1563px; top: 70px; width: 93px; height: 43px; z-index: 2; background-image: url("http://esiema.de/img/cloud-2.png");' class="cloud"></div><div style='left: 1678px; top: 0px; width: 68px; height: 46px; z-index: 2; background-image: url("http://esiema.de/img/cloud-3.png");' class="cloud"></div><div style='left: 1027px; top: 0px; width: 68px; height: 46px; z-index: 2; background-image: url("http://esiema.de/img/cloud-3.png");' class="cloud"></div><div style='left: 356px; top: 150px; width: 91px; height: 65px; z-index: 2; background-image: url("http://esiema.de/img/cloud-4.png");' class="cloud"></div><div style='left: 728px; top: 50px; width: 91px; height: 65px; z-index: 2; background-image: url("http://esiema.de/img/cloud-4.png");' class="cloud"></div><div style='left: 394px; top: 0px; width: 168px; height: 26px; z-index: 2; background-image: url("http://esiema.de/img/cloud-6.png");' class="cloud"></div><div style='left: 1641px; top: 0px; width: 168px; height: 26px; z-index: 2; background-image: url("http://esiema.de/img/cloud-6.png");' class="cloud"></div><div style='left: -219px; top: 0px; width: 265px; height: 65px; z-index: 2; background-image: url("http://esiema.de/img/cloud-5.png");' class="cloud"></div><div style='left: 86px; top: 0px; width: 388px; height: 88px; z-index: 2; background-image: url("http://esiema.de/img/cloud-7.png");' class="cloud"></div><div style='left: 32px; top: 160px; width: 243px; height: 178px; z-index: 2; background-image: url("http://esiema.de/img/cloud-9.png");' class="cloud"></div><div style='left: 856px; top: 90px; width: 243px; height: 178px; z-index: 2; background-image:...

CSS

body {
    /*To hide the horizontal scroller appearing during the animation*/
    overflow: hidden;
    background: #00BFFF;
    color: #D7D7D7;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    height: 100%;
    width: 100%;
}
#cloud-holder {
    height: 410px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0;
}
.cloud {
    background-repeat: no-repeat;
    position: absolute;
    z-index: 0;
}

JavaScript

$(function() {
    if (!$.browser.msie || $.browser.version > 5) {
        $("#cloud-holder").clouds({
            clouds: [
                {
                src: 'cloud-1.png',
                x: -150,
                y: 90,
                speedX: -1},
            {
                src: 'cloud-2.png',
                x: 160,
                y: 70,
                speedX: -2},
            {
                src: 'cloud-2.png',
                x: 1260,
                y: 110,
                speedX: -2},
            {
                src: 'cloud-3.png',
                x: 0,
                y: 0,
                speedX: -1},
            {
                src: 'cloud-3.png',
                x: 1400,
                y: 0,
                speedX: -2},
            {
                src: 'cloud-4.png',
                x: 0,
                y: 50,
                speedX: -1},
            {
                src: 'cloud-4.png',
                x: 1400,
                y: 150,
                speedX: -1},
            {
                src: 'cloud-5.png',
                x: 1315,
                y: 0,
                speedX: -1},
            {
                src: 'cloud-6.png',
                x: 65,
                y: 0,
                speedX: -1},
            {
                src: 'cloud-6.png',
                x: 965,
                y: 0,
                speedX: -2},
            {
                src: 'cloud-7.png',
                x: 1150,
                y: 0,
                speedX: -1},
            {
                src: 'cloud-8.png',
                x: 310,
                y: 0,
                speedX: -2},
            {
                src: 'cloud-9.png',
                x: 180,
                y: 90,
                speedX: -1},
            {
                src: 'cloud-9.png',
                x: 1280,
                y: 160,
                speedX: -1},
            {
                src: 'cloud-10.png',
                x: 500,
                y: 160,
       ...