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;
           }
           .image:nth-of-type(4){
             background-color: purple;
           }

        </style>
        <script type="text/javascript">
            function Init(){
                pictures=document.getElementsByClassName("image");
                
                spaceH=screen.height - picture.height;
                spaceW=screen.width - picture.width;

                for each (var picture in pictures) {
									setInterval (function () {
                  	mover(picture);
                  }, 0);
								}

            }
            function mover(picture){
            console.log(picture, spaceH);
                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>