JSFiddle - React, Tailwind, and code Playground

by BramVanroy

HTML

<div id="wrapper">
    <img class="not-mobile" src="" data-path="lamp" alt="Lamp" />
    <img class="not-mobile" src="" data-path="sun" alt="Sun" />
</div>

CSS

html, body {height: 100%;}

body {background: whiteSmoke;}

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

img.not-mobile {
    max-width: 75%;
    margin: 50px;
}

JavaScript

$(document).ready(function() {
    $("img").hide();
    
    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").show();
});