JSFiddle - React, Tailwind, and code Playground

by siyakunde

HTML

<div id="container1">
			<div>
				<div id="content">xxxxxxxxxxxxxxx</div>
				<input type="button" id="click"  value="set the content"/>
			</div>
		</div>

CSS

#content{
  background-image: url('http://www.google.com/images/srpr/logo3w.png');
  background-size: 100% 100%;
}

JavaScript

function getChildNodesByTag(con, tag) {
				var l = [];
				for ( con = con.firstChild; con; ) {
					con.tagName && (con.tagName.toLowerCase() === tag) && l.push(con);
					con = con.nextSibling;
				}
				return l
			};
			function format(template, data) {
				for (var key in data) {
					template = template.replace("{" + key + "}", data[key]);
				}
				return template;
			}

			function createDv(coord, bg, container) {
				var dv = document.createElement("div");
				var text = format('position:absolute;left:{left}px;top:{top}px;width:{width}px;height:{height}px;', {
					left : coord[0],
					top : coord[1],
					width : coord[2],
					height : coord[3]
				});
				dv.style.cssText = text;
				dv.style.backgroundImage = "url(http://imagebin.org/index.php?mode=image&id=242117)";
				dv.style.backgroundPosition = -bg[0] + "px " + -bg[1] + "px"
				container && container.appendChild(dv);
				return dv;
			}

			function getContentSize(content) {
				var tb = document.createElement("table");
				tb.cellPadding = "0";
				tb.cellSpacing = "0";
				//tb.style.display = "none";
				var row = tb.insertRow(0);
				var cell = row.insertCell(0);
				cell.appendChild(content);
				document.body.appendChild(tb);
				var size = [Math.max(tb.offsetWidth, 160), Math.max(tb.offsetHeight, 50)];
				document.body.removeChild(tb);
				return size;
			}

			function createWindow(content) {
				var con = document.createElement("div");
				var size = getContentSize(content);
				var leftArray = [0, 10, 10 + size[0]], topArray = [0, 30, 30 + size[1]];
				var widthArray = [10, size[0], 10], heightArray = [30, size[1], 10];
				var bgxArray = [0, 10, 3990], bgyArray = [0, 30, 3990];
				for (var i = 0; i < 9; i++) {
					var l = i % 3, t = Math.floor(i / 3);
					createDv([leftArray[l], topArray[t], widthArray[l], heightArray[t]], [bgxArray[l], bgyArray[t]], con);
				}
				return con;
			}
			function makeWindow(element){
				var...