JSFiddle - React, Tailwind, and code Playground

HTML

<div id="randomdiv">Click me, I'm a random div.</div>

<div id="reset">Click me to reset.</div>

CSS

#randomdiv {
    width: 400px;
    height: 200px;
    color: #fff;
    background-image: url(http://www.psdgraphics.com/wp-content/uploads/2009/01/planet-earth-in-space.jpg);
    background-position: 0 0;
    cursor: pointer;
}
.csstransitions #randomdiv {
    -webkit-transition: background-position 3s;
    -moz-transition: background-position 3s;
    -o-transition: background-position 3s;
}
.no-csstransitions #randomdiv {
    /* :-( */
}
#reset {
    margin-top: 10px;
    cursor: pointer;
}

JavaScript

$('#randomdiv').click(function(){
    $(this).css('backgroundPosition','45% 80%');
    
    /* You ideally wouldn't but these together, but
       we're limited by what's possible on JSFiddle */
    $(this).animate({backgroundPositionX: '45%'}, 3000, linear);
    $(this).animate({backgroundPositionY: '80%'}, 3000, linear);
});

/* 
   $('.csstransitions #randomdiv') and 
   $('.no-csstransitions #randomdiv') won't work here
   on JSFiddle because the script executes in a separate 
   iframe, but they will work in reality and you should
   use them in your JS:

$('.csstransitions #randomdiv').click(function(){
    $(this).css('backgroundPosition','45% 80%');
});

$('.no-csstransitions #randomdiv').click(function(){
    $(this).animate('backgroundPositionX','45%');
    $(this).animate('backgroundPositionY','80%');
});

*/

$('#reset').click(function(){
    $('#randomdiv').css('backgroundPosition','0 0');
});

/* Modernizr 2.0.6 (Custom Build) | MIT & BSD
 * Build: http://www.modernizr.com/download/#-csstransitions-iepp-cssclasses-testprop-testallprops-domprefixes
 */
;window.Modernizr=function(a,b,c){function A(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+n.join(c+" ")+c).split(" ");return z(d,b)}function z(a,b){for(var d in a)if(k[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function y(a,b){return!!~(""+a).indexOf(b)}function x(a,b){return typeof a===b}function w(a,b){return v(prefixes.join(a+";")+(b||""))}function v(a){k.cssText=a}var d="2.0.6",e={},f=!0,g=b.documentElement,h=b.head||b.getElementsByTagName("head")[0],i="modernizr",j=b.createElement(i),k=j.style,l,m=Object.prototype.toString,n="Webkit Moz O ms Khtml".split(" "),o={},p={},q={},r=[],s,t={}.hasOwnProperty,u;!x(t,c)&&!x(t.call,c)?u=function(a,b){return t.call(a,b)}:u=function(a,b){return b in a&&x(a.constructor.prototype[b],c)},o.csstransitions=function(){return A("transitionProperty")};for(var B in...