JSFiddle - React, Tailwind, and code Playground

HTML

<div role="main" class="main home">
        <section>
            
           
            
            <div class="steam"></div>
            
           
        </section>
    </div>

CSS

/* 
 *    Main
 */
.main {
    position                : relative;
    min-height                : 568px;
    border-top                : rgb(255, 255, 255) 28px solid;
}


/* 
 *    Home
 */
.home {
    overflow                : hidden;
    background                : url(http://www.mikevierwind.nl/images/backgrounds/bg-home.jpg) no-repeat;
}


/* content / text */
.home h1 {
    position                : absolute;
    top                        : 52px;
    left                    : 143px;
    z-index                    : 50;
    font-size                : 2.200em;
    width                    : 72%;
    color                    : rgb(255, 255, 255);
    line-height                : 26px;
    letter-spacing            : 0.008em;
    text-shadow                : rgb(72, 72, 72) 0 0 6px;
}

    .lt-ie8 .home h1 {
        width                    : 70%;
    }

    .home h1 strong {
        font-size            : 1.500em;
        letter-spacing        : -0.017em;
    }
    
    .home h1 span {
        float                : left;
        padding                : 0 0 0 19px;
    }
    
    .home h1 span + span {
        padding                : 0 0 0 45px;
    }

/* button homepage */
.home section > .button {
    position                : absolute;
    top                        : 168px;
    left                    : 134px;
}

/* stoom boven kop thee */
.home .steam {
    top                        : -55px;
    left                    : 335px;
}

/* pictures friends */
.pictures-friends-home {
    position                : absolute;
    top                        : 325px;
    left                    : 561px;
    z-index                    : 50;
}

    .pictures-friends-home li {
        float                    : left;
        position                : relative;
        width                    : 198px;
        height                    : 225px;
        overflow                : hidden;
    }

    .pictures-friends-home li:first-child {
        height               ...

JavaScript

/*
 *    Animate stoom / rook
 */

    var createSteam = function createSteam() {
        "use strict";
    
        var i = 0;
        for (; i < 3; i += 1) {
        setTimeout((function (idx) {
            return function addSmoke () {
            var time = 8500,
                smoke = $('<div />', {
                "class": 'smoke smoke' + (idx + 1),
                css: {
                    opacity: 0
                }
            });
            
            // add to steam container
            $(smoke).appendTo('.steam');
    
            // animate
            $.when(
              // animate to 100% opacity in half the time (fade in)
              $(smoke).animate({
                opacity: 1
              }, {
                duration: time * 0.2,
                easing: 'linear',
                queue: false,
                
                // animate to 0% opacity in the remaining time (fade out)
                complete: function () {
                  $(smoke).animate({
                    opacity: 0
                  }, {
                    duration: time * 0.8,
                    easing: 'linear',
                    queue: false
                  });
                }
              }),
    
              // animate movement
              $(smoke).animate({
                bottom: $('.steam').height()
              }, {
                duration: time,
                easing: 'linear',
                queue: false
              })
    
            // when all down, remove and add new random smoke
            ).then(function () {
              $(smoke).remove();
              addSmoke();
            });
          };
        }(i % 3)), i * 2500);
      }
    }
    $( createSteam );