JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<!-- POZOS -->
<div id="infoContainer" style="width: 100%;"></div>
<script type="application/javascript">
    document.addEventListener("DOMContentLoaded", function (t) {
        var s, e = "https://storage.googleapis.com/gpes-static/pozos-2019/pozos-MAPA-360-px.svg",
            o = "https://storage.googleapis.com/gpes-static/pozos-2019/pozos-MAPA-510-px.svg",
            a = "https://storage.googleapis.com/gpes-static/pozos-2019/pozos-MAPA-730-px.svg",
            i = "https://storage.googleapis.com/gpes-static/pozos-2019/pozos-MAPA-1024-px.svg",
            g = document.getElementById("infoContainer"),
            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>
<!-- /POZOS -->