JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mattbryson/TouchSwipe-Jquery-Plugin/master/jquery.touchSwipe.js"></script>
<!DOCTYPE HTML>
<html>
<head>  
    <!-- 
		NOTE viewport is set so user can scale 
		-->
<meta name="viewport" content="user-scalable=yes"/>
</head>
<body>
<div id="touchme">
    <div id="zoomme">Zoom me</div>
    <div id="logtext">Log:</div>
    <div id="log"></div>
    <div id="footertext">Image:</div>
</div>
<div class="footer">
    <a href="http://example.com/">
        <img id="ad" style="cursor: pointer;" src="http://img0.www.suckmypic.net/img/G/G/ffjFYo1j/jsFiddle1.png" title="Example"></img>
	</a>
</div>
</body>
</html>

CSS

#log{
    background-color : #888;
    -webkit-border-radius : 20px;
    -moz-border-radius : 20px;
    border-radius : 20px;
    color : #fff;
    opacity : 0.8;
    margin : 15px;
    height : 100px;
    overflow : auto;
    padding : 20px;
}
div#logtext {
   margin-top:80px;
   font: 400 20px/20px sans-serif;
   color: #ffce00;
   font-weight:bold;
   text-align: center;
}
div#footertext {
   position:fixed;
   bottom:100px;
   font: 400 20px/20px sans-serif;
   color: #ffce00;
   font-weight:bold;
   text-align: center;
   left:50%;
   margin-left:-29px;
}
div.footer {
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-364px;
    height:90px;
    z-index:501;
}
#touchme {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
}
#zoomme {
    text-align: center;
    font: 400 36px/36px sans-serif;
    color: #ffce00;
    margin-top: 20px;
}

JavaScript

function log(msg) {
    $('#log').text(msg);
}

var pziW = "test";
var viewport_width = $(window).innerWidth();

$(function() {      
    $("#touchme").swipe( {
        pinchIn:function(event, direction, distance, duration, fingerCount, pinchZoom)
        {
            console.log("pinchIn");
            console.log(event);
            pziW=viewport_width - distance;
            $("#log").text(pziW);
            jqUpdateSize();
        },
        pinchOut:function(event, direction, distance, duration, fingerCount, pinchZoom)
        {
            console.log("pinchOut");
            console.log(event);
            pziW=viewport_width - distance;
            $("#log").text(pziW);
            jqUpdateSize();
        },
        pinchStatus:function(event, phase, direction, distance , duration , fingerCount, pinchZoom) {
            console.log("pinchStatus");
            console.log(event);
            pziW=viewport_width - distance;
            $("#log").text(pziW);
            jqUpdateSize();
        },
        fingers:2,  
        pinchThreshold:0  
    });
});

function jqUpdateSize() {
    var wiW = $(window).innerWidth();
    $("#log").text(pziW + " test image");
    if (wiW < 760 || pziW < 760) {
        var msg = "Image 468";
        log(msg);
        $("#log").text(pziW);
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/H/y/cdsi5AqK/jsFiddle2.png");
        $(".footer").css("height", "60px");
        $(".footer").css("margin-left", "-234px");
    }
    if (wiW < 500 || pziW < 500) {
        var msg = "Image 234";
        log(msg);
        $("#log").text(pziW);
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");
        $(".footer").css("height", "60px");
        $(".footer").css("margin-left", "-117px");
    }
    if (wiW > 760 || pziW > 760) {
        var msg = "Image 760";
        log(msg);
        $("#log").text(pziW);
        $("img#ad").attr("src",...