JSFiddle - React, Tailwind, and code Playground

HTML

<h3>JavaScript Minesweeper</h3>
<div id="container">
	<div id="content">
        <div id="outer">
            <div id="headerBar">
                <table>
                    <tr width="100%;">
                        <td class="innerHead" id='easy'><button>Easy</button></td>
                        <td class="innerHead" id='intermediate'><button>Intermediate</button></td>
                        <td class="innerHead" id='expert'><button>Expert</button></td>
                    </tr>                    
                </table>                
            </div>
            <br /><br />
            <table class="gameBoard"></table>
        </div>
        
	</div>
</div>

CSS

#container{
    background-color:#757575;
}

table {
    border-collapse:collapse;
    margin:auto;
}
#tableBorder{
    height:10px;
    width:16px;
}

#leftRightBorder{
    height:16px;
    width:16px;
}
#bottomBorder{
    height:16px;
    width:16px;
}

tbody {
    line-height:0;
}
td {
    padding:0;
}

.clicked {
    background-color: #eee;
    text-align:center;
    
}

.bomb {
    height:16px;
    width:16px;
}
.blank {
    height:16px;
    width:16px;
}
.flag {
    height:16px;
    width:16px;
}
.innerHead{
    padding-left:20px;
    padding-right:20px;
    padding-top:20px;
    padding-bottom:0;
}

JavaScript

function draw_board(x,y){
    $('.gameBoard').append('<tr id="header"></tr>');
        
    //first draw the background
     var header=$('.gameBoard').find("#header");
    header.append('<tr><td><img id="tableBorder" src="http://www.chezpoor.com/minesweeper/images/bordertl.gif"></td>');
    for (var i=0; i<x; i++){
        //this adds in the border
        header.append('<td><img id="tableBorder" src="http://www.chezpoor.com/minesweeper/images/bordertb.gif"></td>');
    }
       header.append('<td><img id="tableBorder" src="http://www.chezpoor.com/minesweeper/images/bordertr.gif"></td></tr>');
    
    //header row finished above. Now draw the actual cells
    
     header.parent().last().append('<tr class="left" id ="cell"><td><img id="leftRightBorder" src="http://www.chezpoor.com/minesweeper/images/borderlr.gif"></td>');
    for(i=0; i<x;i++){
        header.parent().find("#cell").last().append('<td class="cell blank" id='+(i+1)+'><img src="http://www.chezpoor.com/minesweeper/images/blank.gif"</td>');
    }
    header.parent().find("#cell").last().append('<td class="right" id="cell"><img id="leftRightBorder" src="http://www.chezpoor.com/minesweeper/images/borderlr.gif"></td></tr>');

    //draw body
    var counter=y+1;
    for(var j=0;j<y-1;j++){
        
         header.parent().last().append('<tr class="left" id ="cell"><td><img id="leftRightBorder" src="http://www.chezpoor.com/minesweeper/images/borderlr.gif"></td>');
        for( i=0; i<x;i++){
            var newCount=i+counter;
            header.parent().last().find(".left").last().append('<td class="cell blank" id='+newCount+'><img src="http://www.chezpoor.com/minesweeper/images/blank.gif"></td>');
        }
        counter+=y;
        header.parent().last().find(".left").last().append('<td id="right"><img id="leftRightBorder" src="http://www.chezpoor.com/minesweeper/images/borderlr.gif"></td></tr>');    
    }
    
    //draw bottom border
        header.parent().last().append('<tr class="left" id...