JSFiddle - React, Tailwind, and code Playground

by Manish Sharma

HTML

<body onload="">
				
				<div id="leftSide"></div>
			    <div id="rightSide"></div>
			    
		</body>

CSS

img {position:absolute;background:url("http://tagc.dk/wp-content/uploads/2012/09/gr__n_kopi.jpg";)}
					div {width:500px;height:500px}
					#rightSide {
								position:absolute;
								left: 500px; 
            					border-left: 1px solid black
							   }

JavaScript

var numberOfFaces=5;
			    		var top_position = 400;
			    		var left_position = 400;
			    		var theLeftSide = document.getElementById("leftSide");
			    		var i = 0;
          
function generateFaces(){
			    			while(i < numberOfFaces)
			    			{
			    				var this_img = document.createElement("img");
			    				this_img.src="http://tagc.dk/wp-content/uploads/2012/09/gr__n_kopi.jpg";
                  this_img.width="20";
                  this_img.height="20";
                  
                   top_position  = Math.random()*400; left_position = Math.random()*400;
			    				this_img.style.top = top_position + "px";
			    				this_img.style.left = left_position + "px";
			    				theLeftSide.appendChild(this_img);
			top_position  = top_position - 50; 
      left_position = left_position - 50;
			    				i++;
			    			}
			    		}
              
generateFaces();