JSFiddle - React, Tailwind, and code Playground

HTML

<body oncontextmenu="return false;">
        <br /><br />
            <div class="game">
                <div id="all">
                    <div id="leftline" class="line vertical"></div>
                    <div id="rightline" class="line vertical"></div>
                    <div id="topline" class="line horizontal"></div>
                    <div id="bottomline" class="line horizontal"></div>
                    <img src="images/headerTopLeft.png" id="topLeft" class="corner" />
                    <img src="images/headerTopRight.png" id="topRight" class="corner" />
                    <img src="images/footerBottomRight.png" id="bottomRight" class="corner" />
                    <img src="images/footerBottomLeft.png" id="bottomLeft" class="corner" />
                <div id="stac">
                    <span id="flags" class="text">010</span>
                    <img src="" id="smile" width="26" height="26" onclick="newGame()" />
                    <span id="time" class="text">000</span>
                </div>
                    <div id="top"></div>
                    <div id="game">
                    </div>
             </div>
            </div>

CSS

* {
                    margin:0;
                    padding:0;
                    direction:rtl;
                }
                .game table {
                    border-spacing: 0;
                }
                .game td {
                    width: 18px;
                    height: 18px;
                    text-align:center;
                    font-weight:bold;
                    font-size: 16px;
                }
                .game table {
                    margin:0 auto;
                }
                .hide {
                    background:#bdbdbd;
                    border-left: 3px solid #ffffff;
                    border-top:3px solid #ffffff;
                    border-bottom:3px solid #7b7b7b;
                    border-right:3px solid #7b7b7b;
                }
                .show {
                    border:1px solid #7b7b7b;
                    background:#bdbdbd;
                    padding:2px;
                }
                .mine {
                    border:1px solid #7b7b7b;
                    background:url('images/mine.png');
                    padding:2px;
                    background-size:100% 100%;
                }
                .boom {
                    border:1px solid #7b7b7b;
                    background:url('images/boom.png');
                    padding:2px;
                    background-size:100% 100%;
                }
                .c1 {
                    color:#4050be;
                }
                .c2 {
                    color:#347b24;
                }
                .c3 {
                    color:#ba575f;
                }
                .c4 {
                    color:#00007b;
                }
                #stac {
                    color: #ff0000;
                    text-align:center;
                    margin:0 auto;
                    background:#c0c0c0;
                    padding: 10px 5px;
                    font-family: digital;
                   ...

JavaScript

var numRows = 9;
                var numCols = 9;
                var allMines = [];
                var mines = 10;
                var Game;
                var GameBoxes;
                var div = document.getElementById("game");
                var All = document.getElementById("all");
                var leftLine = document.getElementById("leftline");
                var rightLine = document.getElementById("rightline");
                var topLine = document.getElementById("topline");
                var bottomLine = document.getElementById("bottomline");
                var smiley = document.getElementById("smile");
                var time = document.getElementById("time");
                var flags = document.getElementById("flags");
                var timer = 0;
                var timerRef;
                createGame();
                var table;
                var gameOn = true;
                var gameStart = false;
                var megulim = 0;
                var flagsNum = mines;
                var rightClicked = false;
                function removeGame () {
                    var z;
                    for (z = 1;z <= numRows; z++) {
                        Empty[z] = [];
                    }
                    var i;
                    for (i = 1;i <= numRows;i++) {
                        shown[i] = [];
                    }
                        div.removeChild(table);
                    smiley.setAttribute("style", null);
                    time.innerHTML = "000";
                    if (mines > 99) flags.innerHTML = mines;
                    else flags.innerHTML = "0" + mines;
                    timer = 0;
                    megulim = 0;
                }
                function newGame () {
                    removeGame();
                    createGame();
                }
                function createGame () {
                    flagsNum = mines;
                    flags.innerHTML = "0" + flagsNum;
                ...