JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<center>
<iframe id="sim" frameBorder="0" class="centerAlign" src="https://cdn.shopify.com/s/files/1/0246/7086/3424/files/index.html?8154775124260488467" width="800" height="1000" onload="updateSize()">
  <p>Your browser does not support iframes.</p>
</iframe>
</center>

CSS

.centerAlign {
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

JavaScript

function updateSize() {
    var size = {
      width: window.innerWidth || document.body.clientWidth,
      height: window.innerHeight || document.body.clientHeight
  }
    
  if (size.width <= 800) {
  	document.getElementById("sim").width = size.width;
  	document.getElementById("sim").height = (size.width) * 1.5;
  }
  else {
     document.getElementById("sim").width = 800;
  	 document.getElementById("sim").height = 800 * 1.5;
  }
}

updateSize();

window.addEventListener("resize", function(event) {
    updateSize();
})