JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" font-size="16px">
    <foreignObject x="0" y="0" width="100" height="100" style="-webkit-transform: scale(2); -webkit-transform-origin: 0 0; transform: scale(2); transform-origin: 0 0;float: left;" externalResourcesRequired="true">
        <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <style> 
            #box { position: relative; height: 50px; width: 50px; background-color: #000;}
            #box2 { height: 50px; width: 50px; background-color: red; } 
            </style>
            </head>
            <body style="float: left;">
                <div id="box"></div>
                <div id="box2"></div>
            </body>
        </html>
    </foreignObject>
</svg>