JSFiddle - React, Tailwind, and code Playground

by Travis Harris

HTML

<div class='wrapper'>10<div class='oh' id='0_0_0_0_0_0'></div></div>

CSS

body{
  font-size:12px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  margin:0;
}
.oh{
  height:100vh;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='14px' width='21px'><text x='0' y='12' font-size='12px'>,000</text></svg>");
}
.wrapper{
  width:100vw;
  height:100vh;
  overflow:none;
  box-sizing:border-box;
  border:1px solid red;
}

JavaScript

var zw = 21;
var zh = 16;
var inds = [0,0,0,0,0,0,0];
var per = 1;
function rsize(){
 var w = document.body.clientWidth;
 if(w<zw)w=zw;
 var r = Math.floor(w/zw);
 var rh = Math.floor(10000000/r);
 per = rh*r;
 document.styleSheets[1]['cssRules'][1].style.width = (r*zw) + 'px';
 document.styleSheets[1]['cssRules'][1].style.height = (rh*zh) + 'px';
}
window.addEventListener("resize", rsize);
rsize();