JSFiddle - React, Tailwind, and code Playground

HTML

<xkcd-img></xkcd-img>

JavaScript

"use strict";

var _inherits = function (child, parent) {
    if (typeof parent !== "function" && parent !== null) {
        throw new TypeError("Super expression must either be null or a function, not " + typeof parent);
    }
    child.prototype = Object.create(parent && parent.prototype, {
        constructor: {
            value: child,
            enumerable: false,
            writable: true,
            configurable: true
        }
    });
    if (parent) child.__proto__ = parent;
};

var XKCD = (function () {
    var _HTMLImageElement = HTMLImageElement;
    var XKCD = function XKCD() {};

    _inherits(XKCD, _HTMLImageElement);

    XKCD.prototype.createdCallback = function () {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "https://xkcd-imgs.herokuapp.com/");
        xhr.onload = (function (data) {
            this.style.backgroundImage = "url('" + JSON.parse(data.target.response).url + "')";
            this.style.backgroundSize = "contain";
            this.style.backgroundRepeat = "no-repeat";
            this.style.position = "absolute";
            this.style.height = "100%";
            this.style.width = "100%";
        }).bind(this);
        xhr.send(null);
    };

    return XKCD;
})();

document.registerElement("xkcd-img", XKCD);