JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<!-- PRODUCCIONES Y CAPACIDADES POR PLANTAS -->
<div id="infoContainer3" style="width: 100%;"></div>
<script type="application/javascript">
    document.addEventListener("DOMContentLoaded", function (t) {
        var s, e = "https://storage.googleapis.com/gpes-static/gas/11-svg-2/11_360px.svg",
            o = "https://storage.googleapis.com/gpes-static/gas/11-svg-2/11_510px.svg",
            a = "https://storage.googleapis.com/gpes-static/gas/11-svg-2/11_730px.svg",
            i = "https://storage.googleapis.com/gpes-static/gas/11-svg-2/11_1024px.svg",
            g = document.getElementById("infoContainer3"),
            p = g.offsetWidth,
            c = p;
        p < 435 ? s = e : p >= 435 && p < 620 ? s = o : p >= 620 && p < 878 ? s = a : p >= 878 && (s = i);
        var l = document.createElement("object");
        l.setAttribute("type", "image/svg+xml"), l.setAttribute("width", c), l.setAttribute("height", "auto"), l.setAttribute("data", s), g.appendChild(l)
    });    
</script>
<!-- /FIN INFOGRAFIA -->