JSFiddle - React, Tailwind, and code Playground

HTML

<script>
    status=0;
        var backgroundImages = new Array(); // create an array holding the links of each image
        var backgroundImages = [
            "https://codyhouse.co/wp-content/uploads/2014/09/product-quick-view-featured.png",
            "https://0bf196087c14ed19d1f11cf1-ambercreativelab.netdna-ssl.com/wp-content/uploads/2016/04/course2-300x250.png",
            "https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcS6KEBXB2afWZN9EimiM7rf-ap8M8I8gxc02N9hyS0L98WxG6EVwoLfGhU",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSNdmylPtmOnRNG14qWjBhPGu949eld0JnUqgFdREQVEnH8TxvTQnlGQQw",
            "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSLS_jeHM1jbWzgHbVZJbEBWcrfnI1gbMjsqsS1d4Joxm6svO5_a90Y8wnE",
            "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTrEES7eyR-rTSJeak-18JrCx-IKF1QJtzzlhihiLG5hwHQ-YT90prT-mc",
            "https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcT69YiOi2muMfySs4l-c7kIN-xoM_iJKWVh4sOKTOXmLSQkh_ZyfnPLe5g",
        ];

        var ImageCnt = 0;

        function nextImage(direction) // this should take into account the current value (starts at 3) and determines whether a higher or lower value should be returned based on the direction
        {
            status=1;
            ImageCnt = (ImageCnt + (direction == "left" ? backgroundImages.length-1 : 1)) % backgroundImages.length;
            document.getElementById("body-1").style.background = "url('"+backgroundImages[ImageCnt]+"')";//put's the new background together for rendering by using the returned value from nextImage()
            setTimeout('status=0;',2000);
        }

</script>

<div class="body-1" id="body-1"><!-- begin body 1 :: this will hold the topmost image slider -->
    <div class="transition" id="trans-left" onclick='if(status==0){nextImage("left");return false;}'><!-- begin transition left :: this will take advantage of rotation to use the same loaded image for both the left and right arrows -->
       ...

CSS

.body-1
{
    margin-top: -50px;
    padding: 0px;
    width: 100%;
    height: 470px;
    background-color: #ebf6f7;
    background-image: url('https://0bf196087c14ed19d1f11cf1-ambercreativelab.netdna-ssl.com/wp-content/uploads/2016/04/course2-300x250.png');
    background-size: 100% 470px;
    transition: background-image 2s;
    overflow: hidden;
}