JSFiddle - React, Tailwind, and code Playground

by wrajesh

HTML

<!DOCTYPE html>
<html lang="en">
<body>

    <div class="container m-t-20 m-l-20px">
        <div class="row">
            <div class="col-9">
                <h2>Map of KidKits</h2>
                <img src="images/map crossfade.gif" alt="" class="map-gif" id="img3">
            </div>

            <div class="col-3">
                <h2 id="first-bad">Div to change color</h2>
            </div>

        </div>
    </div>

    <script>
        
    </script>

</body>

</html>

CSS

body {
  background-image: url('https://drive.google.com/file/d/1UqejZKWZ_cy9fucaAqcw6pKBoURUYwhb/view?usp=sharing')
}

JavaScript

let counter = 0;
        const bgColorArray = ['red', 'orange', 'yellow'];
        setInterval(() => {
        	let increaseCounter = ++counter;
          if (increaseCounter === bgColorArray.length) {
							counter = 0;
					}
        	document.getElementById("first-bad").style.backgroundColor = bgColorArray[increaseCounter]
        }, 1000)

        function resetGif(id) {
            var img = document.getElementById(id);
            var imageUrl = img.src;
            img.src = "";
            img.src = imageUrl;
        };