JSFiddle - React, Tailwind, and code Playground

by alanhogan

HTML

<div id="man-waiting-for-network">
    <img id="man-waiting-for-network_bg" src="http://f.cl.ly/items/0D3S2Z241V3J092d3e0E/slow-net--nice--o2-compressed.jpg" alt="A man waits on a rural porch for a website to load on his Dell laptop." />
    <span id="man-waiting-for-network_fg"></span>
</div>

CSS

#man-waiting-for-network {
    height: 624px;
    width: 866px;
    position: relative;
}

#man-waiting-for-network_fg,
#man-waiting-for-network_bg {
    position: absolute;
}

#man-waiting-for-network_fg {
    top: 54px;
    left: 120px;
    width: 221px;
    height: 239px;
    background-image: url(http://cl.ly/image/1t3w0W1t1Y1h/t2.gif);
    -webkit-mask-image: url(http://f.cl.ly/items/2z1y2X2p2c1K3o0u3K1X/mask.png);
    mask-image: url(http://f.cl.ly/items/2z1y2X2p2c1K3o0u3K1X/mask.png);
}

#man-waiting-for-network_bg {
  top: 0;
    left: 0;
}


@media(max-device-width:865px) {
    #main-waiting-for-network {
      -webkit-transform: scale(0.5);   
    }
}
@media(max-device-width:320px) {
    #main-waiting-for-network {
      -webkit-transform: scale(0.4);   
    }
}

JavaScript

// Composite angryman