JSFiddle - React, Tailwind, and code Playground
by habla
HTML
<div style="width:400px;height:400px;background-color:red;">
<div style="height:100%">
<svg style="height:100%;width:100%;" viewBox="0 0 400 400">
<circle id="greencircle" cx="200" cy="200" r="200" fill="green" />
</svg>
</div>
</div>
<div class="content r-ritem selected-useBordersForDragging useBordersForDragging item-in-selection" id="guid-a0792ffa-5bc7-41e1-9781-ab8c1a0aa6b0" style="position: absolute; left: 0px; top: 0px; transform: translate(280px, 94px); width: 576px; height: 512px;"><div class="ritem selected"><div class="exportarea stretchableContent"><div id="ritem-id-a0792ffa-5bc7-41e1-9781-ab8c1a0aa6b0" class="dash"><div id="resizable-box" class="flip-container flip-notanimating" style="left: 0px; top: 0px; width: 576px; height: 512px;"><div id="output" class="flipper"><div class="r-output-background flip-front flip-1 routput-type-PLOT"><div style="overflow: hidden; height: 100%; background-color:red;"><!--?xml version="1.0" encoding="UTF-8"?-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="" height="" viewBox="0 0 576 511" version="1.1" class="ritem-image">
<defs>
<g>
<symbol overflow="visible" id="glyph0-0-0">
<path style="stroke:none;" d="M 0.59375 2.125 L 0.59375 -8.46875 L 6.59375 -8.46875 L 6.59375 2.125 Z M 1.265625 1.453125 L 5.9375 1.453125 L 5.9375 -7.78125 L 1.265625 -7.78125 Z M 1.265625 1.453125 "></path>
</symbol>
<symbol overflow="visible" id="glyph0-0-1">
<path style="stroke:none;" d="M 3.8125 -7.96875 C 3.207031 -7.96875 2.75 -7.664062 2.4375 -7.0625 C 2.132812 -6.46875 1.984375 -5.566406 1.984375 -4.359375 C 1.984375 -3.160156 2.132812 -2.257812 2.4375 -1.65625 C 2.75 -1.0625 3.207031 -0.765625 3.8125 -0.765625 C 4.425781 -0.765625 4.882812 -1.0625 5.1875 -1.65625 C 5.5 -2.257812 5.65625 -3.160156 5.65625 -4.359375 C 5.65625 -5.566406 5.5 -6.46875 5.1875 -7.0625 C 4.882812 -7.664062 4.425781 -7.96875 3.8125 -7.96875 Z M 3.8125 -8.90625 C 4.789062 -8.90625 5.539062...