JSFiddle - React, Tailwind, and code Playground

by piiantom

HTML

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
        <style>
            .image{
                position: absolute;
                width: 20px;
                height: 20px;
            }
           .image:nth-of-type(1){
             background-color: red;
           }
           .image:nth-of-type(2){
             background-color: blue;
           }
           .image:nth-of-type(3){
             background-color: green;
             width: 40px;
           }
           .image:nth-of-type(4){
             background-color: purple;
           }

        </style>
        <script type="text/javascript">
            function Init(){
                pictures=document.getElementsByClassName("image");
                
                for (let picture of pictures) {
                	spaceH=screen.height - picture.offsetHeight;
									spaceW=screen.width - picture.offsetWidth;
									setInterval (function () {
											mover(picture, spaceH, spaceW);
                  }, 100);
								}

            }
            function mover(picture, spaceH, spaceW) {
                picture.style.top=Math.round(Math.random()* spaceH) + "px";
                picture.style.left=Math.round(Math.random()* spaceW) + "px";
            }
        </script>
    </head>

    <body onload="Init()">
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
        <div class="image"></div>
    </body>
</html>