JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
        <script>
            var tiles = document.getElementsByClassName('tile');
            var totalTypes = 4;
            var interval = 1000;

            function paintTiles() {
                for (var i = 0; i < tiles.length; i++) {
                    tiles[i].className = 'tile'; // reset classes
                    tiles[i].classList.add('type' + Math.ceil(Math.random() * totalTypes));
                }
            }
            paintTiles(); // initial paint
            setInterval(paintTiles, interval); // paint afterwards
        </script>
    </head>
    
    <body>
        <center>
            <div class="wrap">
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
                <div class="tile">
                    <img src="tile_shadow.png">
                </div>
  ...

CSS

html {
    min-width: 100%;
    min-height: 100%;
}
body {
    margin:0;
    padding:0;
    font-family: Arial, Helvetica, sans-serif;
    background-color: darkblue;
    height: 1200px;
}
.tile {
    display: inline-block;
    width: 300px;
    height: 300px;
    /*border: 1px solid black;*/
    transition: 1s all linear;
    margin-top: -4px;
    margin-left: -4px;
}
.type1 {
    background: purple;
}
.type2 {
    background: blue;
}
.type3 {
    background: orange;
}
.type4 {
    background: yellow;
}