JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div style='width:100%;height:50px;'>
        <div style='float:left;'>
            <input type='button' id='itsGoTime' value="Unleash the horde" />
            <div>Not working right? (Check detected image dimensions to the right) You may need to refresh the page.</div>
        </div>
        <div style='float:right;'>Image Dimensions:<span id='imDim'></span>
            <br/>Zombie Count:<span id='zc'>0</span>
        </div>
        <div style='clear;both;'></div>
    </div>
    <div id='map'>
        <img src='http://i.imgur.com/TEOflul.jpg' />
    </div>
</body>

JavaScript

$(function () {
    var numberOfZombies = 3000;
    var populationSpeed = 10;
    var leftBoundary = 50;
    var topBoundary = 20;
    var rightBoundary = 150;
    var bottomBoundary = 20;
    var imgWidth = $('#map img').width();
    var imgHeight = $('#map img').height();
    var offSet = $('#map').offset();
    topBoundary = topBoundary + offSet.top;
    $('#imDim').text(imgWidth + "w / " + imgHeight + "h");
    $('#map').css('width',imgWidth);
    $('body div:first').css('width',imgWidth);
    var maxTop = imgHeight - bottomBoundary;
    var maxLeft = imgWidth - rightBoundary;
    var counter = 0;

    $('#itsGoTime').click(function () {
        makeZombie();
    });

    function makeZombie() {
        if (counter < numberOfZombies) {
            var zombie = $("<div style='width:50px;height:50px;position:absolute;'><div class='zombie' style='background-color:#CC00CC;width:50px;height:50px;position:relative;'></div></div>");
            var leftPos = 0,
                topPos = 0,
                counter2 = 0;
            while ((leftPos < leftBoundary || leftPos > maxLeft || topPos < topBoundary || topPos > maxTop) && counter2 < 250) {
                counter2++;
                leftPos = Math.floor((Math.random() * imgWidth) + 1);
                topPos = Math.floor((Math.random() * imgHeight) + 1);
            }
            counter++;
            zombie.css({
                top: (topPos - 24) + "px",
                left: (leftPos - 24) + "px"
            });
            $('#map').append(zombie);
            $('.zombie', zombie).animate({
                width: "2px",
                height: "2px",
                left: "24px",
                top: "24px"
            }, populationSpeed).promise().done(function () {
                $('#zc').text(counter);
                makeZombie();
            });
            zombie.hover(function () {
                $('.zombie', this).animate({
                    width: "100%",
                    height: "100%",
  ...