JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<div id="emulator">
 
<iframe id="iframe" width="450" height="900" src="https://appetize.io/embed/nqv1rjexp88kqcqx9vdunvbnwr?device=iphone11pro&scale=100&orientation=portrait&osVersion=13.3&screenOnly=true&xdocMsg=true">



</iframe>
<div id="controls">
<button onClick="saveScreenshot()">Save Screenshot</button>
</div>
</div>

CSS

#emulator {
  display: flex;
  flex-direction: row;
  
}

#controls {
  margin: 30px;
}

iframe {
  border: 0;
}

JavaScript

function saveScreenshot() {
    iframe.contentWindow.postMessage('saveScreenshot', '*');

}