JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <svg width="180px" height="360px" viewBox="0 0 45 90" xmlns="http://www.w3.org/2000/svg">
    <path d="M45.02,17.449l0,-5.837l-0.324,0c0,-3.841 0,-6.21 0,-6.344c0,-0.786 0.105,-3.078 -2.657,-3.659c-5.996,-1.263 -19.539,-1.352 -19.539,-1.352c0,0 -13.543,0.089 -19.539,1.352c-2.762,0.58 -2.657,2.873 -2.657,3.659c0,0.192 0,4.987 0,12.133l-0.324,0l0,14.537l0.324,0c0,22.9 0,52.313 0,52.794c0,0.786 -0.105,3.079 2.656,3.66c5.997,1.262 19.54,1.351 19.54,1.351c0,0 13.542,-0.089 19.539,-1.351c2.762,-0.581 2.657,-2.874 2.657,-3.66c0,-0.594 0,-45.159 0,-67.283l0.324,0Zm-22.52,-13.778c0.535,0 0.969,0.434 0.969,0.969c0,0.536 -0.434,0.97 -0.969,0.97c-0.535,0 -0.969,-0.435 -0.969,-0.97c0,-0.536 0.434,-0.969 0.969,-0.969Zm20.262,75.595l-40.525,0l0,-71.234l40.524,0l0,71.234l0.001,0Z"></path>
     <foreignObject width="164" height="288" transform="translate(2.238,8.019) scale(0.25,0.25)">
        <div id="screen">
            I'm a very long text. I am not as big as I was
        </div>
     </foreignObject>
</svg>

    <div>
      Text
    </div>
</body>

CSS

html, body, #screen {
  width:100%; height:100%; font-size:12px
}

#screen {
  background: green;
  overflow: auto;
  padding:2px;
  box-sizing:border-box
}