JSFiddle - React, Tailwind, and code Playground

by evan

CSS

html {
  background-image: url(http://i.imgur.com/HahIUMY.jpg);
  background-size: 100% 100%;
  background-position: center;
  height: 100%
}

.banana {
  width: 120px;
  height: 144px;
  margin-left: -60px;
  margin-top: -66px;
  background-position: left bottom;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
}

.banana {
  background-image:...

JavaScript

var $j = jQuery.noConflict();
var vWidth = $j(window).width();
var vHeight = $j(window).height();

$j('body').on('click touchstart', '.banana', function () {
	var ba = $j(this);
	ba.addClass('peeled');
  setTimeout(function () {
  	ba.remove();
  }, 1000);
});

setInterval(function () {
	if ($j('.banana').length < 100) {
  	var bb = $j('<div class="banana"></div>');
    bb.css({
    	left: randInt(vWidth),
      top: randInt(vHeight)
    });
    $j('body').append(bb);
  }
}, 2000);

function randInt(maxInt) {
	return Math.floor(Math.random() * maxInt)
}