JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div id="wrapper">
    <img src="" data-path="lamp" alt="Lamp" />
    <img src="" data-path="sun" alt="Sun" />
    
    <span id="jsDisabledMessage">It appears that you have disabled JavaScript. Because of this we cannot provide the images you requested. Please turn on JavaScript in your browser's settings.</span>
</div>

CSS

html, body {height: 100%;}

body {background: whiteSmoke;}

#wrapper {
    width: 90%;
    margin: 0 auto;
    height: 100%;
    background: white;
    text-align: center;
}

img {
    max-width: 75%;
    margin: 20px;
    display: none;
}

JavaScript

$(document).ready(function() {
    $("#jsDisabledMessage").hide();
    
    
    function imagePicker() {
        $("img").fadeOut();
        if ($(window).width() < 480) {
            $("img").attr("src", function(index, src) {
                return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute("data-path") + "-mobile.jpg";
            });
        }
        else {
            $("img").attr("src", function(index, src) {
                return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute("data-path") + "-not-mobile.jpg";
            });
        }
        $("img").fadeIn("fast");
    }
    
    imagePicker();
    
    var delay = (function(){
        var timer = 0;
        return function(callback, ms){
            clearTimeout (timer);
            timer = setTimeout(callback, ms);
        };
    })();
    
    $(window).resize(function() {
        delay(function(){
            imagePicker();
        }, 500);
    });
});