Tailwind & CSS - DOM child element view width to a fixed width

So,

I have a project using React & tailwindCSS, and I'm building a platform using a custom CMS. The problem that I'm facing is the following:

• Im showing different screen size options on the CMS and you can press on different screen sizes to view your content in lets say on a mobile screen.
• Since the CMS editor is not in an iframe changing the width of the parent element to 1300px or 400px is not causing the elements inside to change to tailwinds responsive design, since the viewport is still the exact same on the DOM.

Now I've read about CSS container queries, but since I'm using tailwindCSS it would be rather painful to start editing that. Is there any way to manipulate the DOM within and tell to the editor div.element that its viewport is only ex. 1400px.

And yes, iframe would be a viable option.

Thanks in advance!

.screen--desktop {
  max-width: 1440px;
  width: 100%;
}

.screen--mobile {
  max-width: 360px;
  width: 100%;
}

<html>

<body>

  <div class="container">
    <!-- PAGE CONTENT wv is 100 -->
    <div class="editor screen--desktop">
      <!-- FRAMED CONTENT wv needs to be 50 -->
      <div class="container">
        <!-- Container @media max width needs to listen to the parent div's width only -->
        <!-- Here would be element1 -->
      </div>
    </div>

  </div>

</body>

</html>