Help with recreating "responsive" html element (like in the docs)

[Nikita0x]

Hi. So I am trying to recreate this

An element which you can resize and check how your tailwind classes will look (for testing).
The point being to be able to resize the html element and see the changes, and not the browser itself.

But so far I could not manage to do it.
I tried to use ResizeObserver and it did not help, my responsive classes were not being triggered, only by resizing the browser.
How can I achieve the same functionality which is shown in the docs?

Here is more context:
https://sage-dango-588592.netlify.app/ - website so that you can test it yourself
https://github.com/Nikita0x/vue-practice - repo with the code

tailwind-observer.mp4

[wongjn]

The code of the implentation on the Tailwind website can be found here and here. It seems to use an <iframe> element. Perhaps it can be inspiration for your own implementation.

[Nikita0x]

@wongjn Thank you! I will definitely try the <iframe>!

[Nikita0x]

I even found a more cleaner solution.
Since I just needed it for my own testing, you can easily achieve the desired functionality via using @container. This is basically exactly what I wanted