JSFiddle - React, Tailwind, and code Playground

by Jeff

CSS

* {
    box-sizing: border-box;
}

#map {
    background: #FF0;
    display: inline-block;
}

#map > .tile {
    width: 32px;
    height: 32px;
    float: left;
    text-align: center;
    line-height: 32px;
}

#map > .tile.water {
    background: #00F;
    color: #fff;
}

#map > .tile.grass {
    background: #0F0;
}

JavaScript

var tile = function(tile_x, tile_y, tile_type, tile_adjacent) {
    var t = this;
    t.x = tile_x;
    t.y = tile_y;
    t.type = tile_type;
    t.adjacent = tile_adjacent;
    t.style = '';

    t.stylize = function() {
        var top = t.adjacent[0],
            right = t.adjacent[1],
            bottom = t.adjacent[2],
            left = t.adjacent[3];

        if (t.type == 'grass') {
            if (top == 'water') {
                if (left == 'water') {
                    t.style += 'border-top-left-radius: 6px;';
                }
                t.style += 'border-top: 2px solid #FF0;';
            }
            if (right == 'water') {
                if (top == 'water') {
                    t.style += 'border-top-right-radius: 6px;';
                }
                t.style += 'border-right: 2px solid #FF0;';
            }
            if (bottom == 'water') {
                if (left == 'water') {
                    t.style += 'border-bottom-left-radius: 6px;';
                }
                t.style += 'border-bottom: 2px solid #FF0;';
            }
            if (left == 'water') {
                if (bottom == 'water') {
                    t.style += 'border-bottom-right-radius: 6px;';
                }
                t.style += 'border-left: 2px solid #FF0;';
            }
        }
        if (t.type == 'water') {
            if (top == 'grass' && left == 'grass') {
                t.style += 'border-top-left-radius: 6px;';
            }
            if (top == 'grass' && right == 'grass') {
                t.style += 'border-top-right-radius: 6px;';
            }
            if (bottom == 'grass' && right == 'grass') {
                t.style += 'border-bottom-right-radius: 6px;';
            }
            if (bottom == 'grass' && left == 'grass') {
                t.style += 'border-bottom-left-radius: 6px;';
            }
        }
    }

    t.html = function() {
        t.stylize();
        return '<div class="tile ' + t.type + '"...