JSFiddle - React, Tailwind, and code Playground

by saschanaz

HTML

<div class="fullscreen" id="img"/>

CSS

html, body { margin: 0; padding: 0; height: 100%; }
.fullscreen {
  width: 100%;
  height: 100%; 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

JavaScript

const resourceUrl = "https://pbs.twimg.com/media/CjoeR8AUgAEXX96.png"
// source: https://twitter.com/yuyukura/status/736935274412806144
let status = 0;
img.style.backgroundImage = `url(${resourceUrl}:small)`
img.addEventListener("click", () => {
  if (status === 0) {
    img.style.backgroundImage = `url(${resourceUrl}:medium)`;
  }
  else if (status === 1) {
    img.style.backgroundImage = `url(${resourceUrl}:large)`
  }
  else if (status === 2) {
    img.style.backgroundImage = `url(${resourceUrl}:orig)`
  }
  status++;
})