[FIXED] How to make a div OR iframe display content as if it was in full screen

Issue

I am trying to build a simple page such as: a code editor on the side and the preview on the other.
Very similar to what play.tailwindcss.com does.

The particular point I am concerned with is the resizing.
I want the "preview" to act as if it was in full page (except it's only half of the page) and have the break-points work accordingly.

Here, play.tailwindcss.com/EbRg1nhVVP?size=1132x1837, you can see tailwind successfully did it (try to resize the preview and you will see the different breakpoints trigger).

Taking a look at the code, It seems that behaviour is achievable with a smart combination of width, margin and scale updated when the user resize the preview.
Eg: width: 2448px; height: 720px; margin-left: -931px; transform-origin: center top; transform: scale(0.239379);

---

Before I try my hand at duplicating it by myself, I would like to know if anyone knows of a library, or piece of JS that would do that?

PS: I found nothing and my searches always bring me to someone trying to set a div in full screen (which is not what I am looking for).

Solution

The Tailwind Playground itself is open source.

The key part you are interested in is probably the Preview.js responsive design mode.

https://github.com/tailwindlabs/play.tailwindcss.com/blob/28dbb2ff1f21ad5a8db0a87cae46f84d102d7c37/src/components/Preview.js#L218

<div className="flex-none text-center text-xs leading-4 tabular-nums whitespace-pre py-3 text-gray-900 dark:text-gray-400">
  {constrainedResponsiveSize.width}
  {'  '}×{'  '}
  {constrainedResponsiveSize.height}
  {'  '}
  <span className="text-gray-500">
    ({Math.round(constrainedResponsiveSize.zoom * 100)}%)
  </span>
</div>

EDIT

The above code is actually just the title for showing the width, height and scale.

Essentially there is just an <iframe> inside a resizeable <div>. When the scale falls below 100% it resizes the contents of the iframe with a transform value.

https://github.com/tailwindlabs/play.tailwindcss.com/blob/28dbb2ff1f21ad5a8db0a87cae46f84d102d7c37/src/components/Preview.js#L293

Answered By - stickyuser

Answer Checked By - Candace Johnson (PHPFixing Volunteer)