JSFiddle - React, Tailwind, and code Playground

by greenpeace

HTML

<!-- INFOGRAFÍA CAMBIO CLIMATICO -->
<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/espana-vulnerable-cambio-climatico/efectos-cc-360.svg?v=1",
            o = "https://storage.googleapis.com/gpes-static/espana-vulnerable-cambio-climatico/efectos-cc-510.svg?v=1",
            a = "https://storage.googleapis.com/gpes-static/espana-vulnerable-cambio-climatico/efectos-cc-730.svg?v=1",
            i = "https://storage.googleapis.com/gpes-static/espana-vulnerable-cambio-climatico/efectos-cc-1024.svg?v=1",
            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>
<!-- /INFOGRAFÍA CAMBIO CLIMATICO -->