JSFiddle - React, Tailwind, and code Playground

by Raul Bojalil

HTML

<script type="text/javascript">
  window.tiledeskSettings = {
        projectid: "644178ccaaa97d0013721638"
  };
  (function(d, s, id) {
       var w=window; var d=document; var i=function(){i.c(arguments);};
       i.q=[]; i.c=function(args){i.q.push(args);}; w.Tiledesk=i;
       var js, fjs=d.getElementsByTagName(s)[0];
       if (d.getElementById(id)) return;
       js=d.createElement(s);
       js.id=id; js.async=true; js.src="https://widget.tiledesk.com/v6/launch.js";
       fjs.parentNode.insertBefore(js, fjs);
  }(document,'script','tiledesk-jssdk'));
</script>

<button id="fullscreen" style="position: absolute">
+
</button>

<iframe src="https://www.sofimex.mx/home/sistemas.php">
</iframe>

CSS

iframe {
        display: block;
        background: #000;
        border: none;
        height: calc(100vh - 20px);
        width: calc(100vw - 20px);
    }

JavaScript

document.getElementById("fullscreen").addEventListener("click", () => {
	document.documentElement.requestFullscreen();
});