JSFiddle - React, Tailwind, and code Playground

HTML

<div id="b">

            <p class="title left">
            <span>
                Lorem
            </span>
            </p>
            <p class="title right">
            <span>
                Ipsum
            </span>
            </p>

            <img src="http://citizenschools.wpengine.netdna-cdn.com/california/files/2011/01/google-logo-small.gif" class="left"/>
            <img src="http://citizenschools.wpengine.netdna-cdn.com/california/files/2011/01/google-logo-small.gif" class="right"/>


</div>

CSS

html, body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica, sans-serif;
        }

        #b {
            position: relative;
        }

        img {
            position: absolute;
            top: 65px;
        }

        img.left {
            left: 170px;
        }

        img.right {
            right: 170px;
        }

        .title {
            position: absolute;
            margin: auto;
            top: 215px;
            bottom: 0;
            width: 145px;
            height: 153px;
            line-height: 153px;
        }

        .title.left {
            left: 200px;
            text-align: right;
        }

        .title.right {
            right: 200px;
            text-align: left;
        }

        .title span {
            vertical-align: middle;
            display: inline-block;
            line-height: 1.25;
        }

JavaScript

(function () {
        window.Banner = {
            z: 1,
            init: function () {
                this.images = document.getElementsByTagName('img');
                this.titles = document.getElementsByTagName('p');

                [].forEach.call(this.images, function (image) {
                    if (image.style.zIndex && image.style.zIndex >= Banner.z) {
                        Banner.z = parseInt(image.style.zIndex) + 1;
                    }
                });

                this.toggleAnimation();
            },
            toggleAnimation: function () {
                var images = this.images;
                var titles = this.titles;

                var i = 0;
                var z = Banner.z;

                function magic() {
                    var _x = i * 2;
                    var _z = i * 2 + 1;

                    var opacity = 0.1;
                    var fadeInTimer = setInterval(function () {
                        if (opacity >= 1) {
                            clearInterval(fadeInTimer);
                        }
                        images[_x].style.opacity = opacity;
                        images[_x].style.filter = 'alpha(opacity=' + opacity * 100 + ")";
                        images[_x].style.zIndex = z;
                        images[_z].style.opacity = opacity;
                        images[_z].style.filter = 'alpha(opacity=' + opacity * 100 + ")";
                        images[_z].style.zIndex = z;
                        opacity += opacity * 0.15;
                    }, 50);

                    var position = 200;
                    var positionTimer = setInterval(function () {

                        titles[_x].style.opacity = 1;
                        titles[_x].style.display = 'block';
                        titles[_z].style.opacity = 1;
                        titles[_z].style.display = 'block';

                        if (position <= 0) {
                            clearInterval(positionTimer);

   ...