JSFiddle - React, Tailwind, and code Playground

by Brandon Semilla

HTML

Hello? Wild Wolf?
HELLO
ah
lol keep it real

CSS

#container {
    width: 64px;
    height: 64px;
    background-color: #FF0;
}

JavaScript

// Don't mess up my beautiful code! ._.
// Please, I'm begging you! D:

var container = document.createElement("div");
container.id = "container";
container.className = "absolute-center";
document.body.appendChild(container);

var tiles = [];

var viewportWidth;
var viewportHeight;
var windowWidth;
var windowHeight;
var tileSize;
window.onresize = resizeViewport = function(){
	viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
	viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
	if(viewportWidth > viewportHeight){
		windowWidth = windowHeight = viewportHeight;
	}
	else if(viewportHeight > viewportWidth){
		windowWidth = windowHeight = viewportWidth;
	}
	tileSize = viewportHeight/16;
	for(var i = 0; i < tiles.length; i ++){
		var t = tiles[i];
		t.x = t.percentX*windowWidth;
		t.y = t.percentY*windowHeight;
		t.updateElement();
	}
}
resizeViewport();
function Tile(x, y){
    this.x = x;
    this.y = y;
    this.percentX = this.x / windowWidth;
    this.percentY = this.y / windowHeight;
    tiles.push(this);
}