JSFiddle - React, Tailwind, and code Playground

by denisz

HTML

<iframe id="test" sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups allow-top-navigation-by-user-activation allow-downloads">

</iframe>

CSS

iframe {
  position: absolute;
  left: 0;
  right: 0;
}

JavaScript

const iframe = document.getElementById('test');

iframe.contentDocument.open();
iframe.contentDocument.write(`
	<html>
    <head>
      <style>
      .grid1 {
        width: 100%;
        display: grid;
        grid-template-columns: 56px 1fr;
        grid-gap: 16px;
      }
      .grid2 {
        display: grid;
        grid-template-columns: 56px 1fr;
        grid-gap: 16px;
      }
      </style>
    </head>
    <body>
        <table>
          <tr>
            <td class='grid1'>
              <div>1</div>
              <div>2</div>
            </td>
          </tr>
        </table>
        <div class='grid2'>
          <div>1</div>
          <div>2</div>
        </div>

      
    </body>
  </html>
`);
iframe.contentDocument.close();