JSFiddle - React, Tailwind, and code Playground

by not important

HTML

<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="http://chancejs.com/chance.js"></script>
<div class="container" id="container"></div>

CSS

.container {
    position: relative;
}

.row {
    overflow: auto;
}

.cell {
    width: 20px;
    height: 20px;
    background-color: #dae8f2;
    float: left;
    border: 1px solid #ccc;
    border-color: #efefef #ccc #ccc #efefef;
    transition: background-color 0.5s linear;
}

.wall {
    background-color: #999;
}

.cell:not(.wall) {
    cursor: pointer;
}

.filled {
    background-color: #e3aad6;
}

.visited {
    background-color: #ff0;
}

CoffeeScript

# flood fill
rng = new Chance 19930910
class FloodFill
    constructor: (@gridData, @fillCallback, @visitedCallback) ->
        @width = @gridData[0].length
        @height = @gridData.length

    parseGridData: ->
        data = []
        for row, y in @gridData
            for cell, x in row
                index = y * @width + x
                data[index] = cell
        data

    beginFill: (x, y) ->
        @reset()
        @closeNode x, y
        @addNeighbors x, y
        @stepInterval = setInterval =>
            @nextStep()
        , 1000 / 8

    nextStep: ->
        if @open.length is 0
            clearInterval @stepInterval
            return
        [x, y] = @iToC @open.shift()
        @closeNode x, y
        @addNeighbors x, y

    addNeighbors: (x, y) ->
        @addOpen x + 1, y
        @addOpen x - 1, y
        @addOpen x, y + 1
        @addOpen x, y - 1

    addOpen: (x, y) ->
        index = @cToI x, y
        unless @closed[index]
            if @data[index] isnt 0
                @open.push index
                @visitedCallback x, y
                @closed[index] = true

    closeNode: (x, y) ->
        @closed[@cToI x, y] = true
        @fillCallback x, y

    reset: ->
        @open = []
        @closed = {}
        @data = @parseGridData()
        clearInterval @stepInterval

    cToI: (x, y) ->
        y * @width + x

    iToC: (index) ->
        x = index % @width
        y = Math.floor index / @width
        [x, y]

buildGrid = ($container, width, height) ->
    gridData = []
    for y in [0...height]
        gridData[y] = []
        $row = $ '<div>'
        $row.addClass 'row'
        for x in [0...width]
            isWall = rng.bool {likelihood: 10}
            if x is 0 or x is width - 1
                isWall = true
            if y is 0 or y is height - 1
                isWall = true
            $div = $ '<div>'
            $div.addClass 'cell'
            $div.attr 'id', "cell_#{x}_#{y}"
            $div.addClass 'wall' if...