JSFiddle - React, Tailwind, and code Playground

HTML

<div id="holder">
  <img src="http://png-3.findicons.com/files/icons/429/wifun/128/pleasance.png" id="picture" />
</div>

CSS

body {
  padding: 0px
}

div {
  background: #999;
  /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#3399FF', endColorstr='#000099');
  /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#3399FF), to(#000099));
  /* for webkit browsers */
  background: -moz-linear-gradient(top, #3399FF, #000099);
  /* for firefox 3.6+ */
}

#picture {
  position: absolute;
}

JavaScript

$('div').width($(window).width()).height($(window).height());
doNextPoint();

function doNextPoint() {
  var maxX = $('#holder').width() - $('#picture').width();
  var newX = rand(0, maxX);
  var maxY = ($('#holder').height() / 2) - $('#picture').height();
  var newY = rand(0, maxY);
  var speed = rand(1000, 3000);

  $('#picture').animate({
    'top': newY + 'px',
    'left': newX + 'px'
  }, speed, function() {
    doNextPoint();
  });
}

function rand(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}