JSFiddle - React, Tailwind, and code Playground

by Matt

HTML

<div id="root" style="position: fixed; inset: 0;">
  <div style="position: relative; width: 100%; height: 100%; overflow: hidden; pointer-events: auto; touch-action: none;">
    <div style="position: absolute; top: 0px; left: 0px; pointer-events: none; overflow: hidden; z-index: 8364305; width: 1728px; height: 474px; perspective: 308.864px;">
      <div style="position: absolute; top: 0px; left: 0px; width: 1728px; height: 474px; transform-style: preserve-3d; pointer-events: none; transform: translateZ(308.864px) matrix3d(0, 0, 1, 0, 0, -1, 0, 0, -1, 0, 0, 0, 0, 0, -3, 1) translate(864px, 237px);">
        <div style="position: absolute; pointer-events: auto; transform: translate(-50%, -50%) matrix3d(0, 0, -0.000925926, 0, 0, -0.000925926, 0, 0, 0.000925926, 0, 0, 0, 0, 0, 0, 1);">
          <div style="width: 1920px; height: 1080px; background: white;">
            <div style="width: 720px; height: 540px; background: red; display: grid; place-items: center;">
              <p style="font-size: 100px;">720x540</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>