JSFiddle - React, Tailwind, and code Playground

by Travis Harris

HTML

<div id='width'>1234</div>
<div class='oh' id='0_0_0_0_0_0'></div>

CSS

body{
  font-size:12px;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  margin:0;
}
.oh{
  height:200px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' height='20' width='20'><defs><linearGradient id='grad' x1='0%' y1='0%' x2='100%' y2='100%'><stop offset='0%' style='stop-color:rgb(0,0,0);stop-opacity:1' /><stop offset='100%' style='stop-color:rgb(255,255,255);stop-opacity:1' /></linearGradient></defs><rect x='0' y='0' width='20' height='20' style='fill:url(#grad)' /></svg>");
  margin:0;
  padding:0;
}

JavaScript

var zw = 21;
function rsize(){
 var w = document.body.clientWidth;
 if(w<zw)w=zw;
 var r = Math.floor(w/zw);
 var rh = Math.floor(1000/r);
 document.styleSheets[1]['cssRules'][1].style.width = (r*zw) + 'px';
 document.getElementById('width').innerHTML = (r*zw) + 'px';
}
window.addEventListener("resize", rsize);
rsize();