JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
            <div class="row text-center">
                <div class="col-md-12 head-device">
                    <div class="mac">
                       <img src="assets/img/mac1.png" class="img-responsive" id="macbook">
                    </div>
                </div>
            </div>

        </div>

CSS

.tablet{
    position: absolute;
    margin-top: -401px;
    margin-left: 148px;
    z-index: 555;
}


.head-device{
    position: relative;
}


.mac{
    height: 544px;
    width: 700px;
    padding: 45px 35px 157px 35px;
    background: url(../img/mac.png) no-repeat;
    background-size: contain;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 5;
}

.mac img{
    width: 628px;
    height: 345px;
}

.ipad{
    height: 402px;
    width: 315px;
    padding: 33px 0px 0px 40px;
    background: url(../img/air.png) no-repeat;
    background-size: contain;
    position: relative;
    }

.ipad img{
    height: 333px;
    width: 254px;
}


.iphone{
    height: 258px;
    width: 150px;
    padding: 42px 0px 207px 40px;
    background: url(../img/iphone.png) no-repeat;
    background-size: 100% 100%;
    position: relative;
}

.phone{
    position: absolute;
    margin-top: -231px;
    margin-left: 345px;
    z-index: 999;
}

JavaScript

$(document).ready(function() {
        var x, y, z;
        setInterval(function() {
            if (x == 0) {
                $('img#macbook').attr('src', "https://pp.vk.me/c625424/v625424663/96a2/ZIlAZfIaR6s.jpg");
                x = 1;

            } else {
                if (x = 1) {
                    $('img#macbook').attr('src', "https://vk.com/images/stickers/210/128.png");
                    x = 0;
                }
            }
        }, 3000);
    });