JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="<%=htmlWebpackPlugin.files.chunks.main.css %>"> -->
</head>
<body>
    <div class="root">
        <section class="game">
            <div class="game__content">
                <h1 class="game__title">Пятнашки!</h1>
                <div class="game__stats">
                    <div class="game__stats-box">
                        <p class="game__stats-title">Ходов</p>
                        <p class="game__stat-moves">0</p>
                    </div>
                    <div class="game__stats-box">
                        <p class="game__stats-title">Время</p>
                        <p class="game__stat-time"><span class="game__min">00</span>:<span class="game__sec">00</span></p>
                    </div>
                </div>
            </div>
            <div class="game__field">
        </section>
    </div>
    <!-- <script src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script> -->
</body>
</html>

CSS

.root {
    margin: 0 auto;
}

.game {
    margin: 30px auto;
    max-width: 600px;
    display: flex;
    flex-direction: column;
}

.game__content {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.game__title {
    margin: 0;
    color: #565151;
    font-size: 34px;
}

.game__stats {
    width: 200px;
    display: flex;
    justify-content: space-between;
}

.game__stats-box {
    border-radius: 15px;
    background: #565151;
    padding: 15px;
}

.game__stats-title {
    color: #928989;
    margin: 0 0 10px 0;
    font-size: 24px;
}

.game__stat-moves, .game__stat-time{
    color: #fff;
    text-align: center;
    margin: 0;
    font-size: 24px;
}

.game__field {
    padding: 10px;
    margin: -5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    background: #565151;
}

.game__square {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    width: 135px;
    height: 135px;
    background: #928989;
    font-size: 50px;
    border-radius: 10px;
    color: #3a3636;
    transition: all 0,5s ease-in-out;
}

.game__square-space {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    width: 135px;
    height: 135px;
    background: #928989;
    font-size: 50px;
    border-radius: 10px;
    transition: all 0,5s ease-in-out;
}

JavaScript

const gameMin = document.querySelector('.game__min');
const gameSec = document.querySelector('.game__sec');


const gameFieldCont = document.querySelector('.game__field');

const arrayOfSquares = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16];

class Stopwatch {
    constructor(minSpan, secSpan) {
        this.minSpan = minSpan;
        this.secSpan = secSpan;
        this.tick = this.tick.bind(this);
        this.stopStopwatch = this.stopStopwatch.bind(this);
    }

    tick() {
        const sec = Number(this.secSpan.textContent);
        (sec < 9) ? (this.secSpan.textContent = '0' + (sec + 1)) : (this.secSpan.textContent = sec + 1);
        if (sec > 58) {
            const min = Number(this.minSpan.textContent);
            this.secSpan.textContent = '00';
            (min < 9) ? (this.minSpan.textContent = '0' + (min + 1)) : (this.minSpan.textContent = min + 1)
        }
    }

    startStopwatch() {
        this.secInterval = setInterval(this.tick, 1000);
    }

    stopStopwatch() {
        clearInterval(this.secInterval);
    }
}

class GameField {
    constructor(arrayOfSquares, gameFieldCont, gameSquareClass) {
        this.gameSquareClass = gameSquareClass;

        this.arrayOfSquares = arrayOfSquares;
        this.gameFieldCont = gameFieldCont;
    }

    updateField(newArray) {
        this.clearField();
        this.arrayOfSquares = newArray;
        this.render();
    }

    render() {
        this.arrayOfSquares.forEach(item => {
            (item === 16) ? this.gameFieldCont.insertAdjacentHTML('beforeEnd',this.gameSquareClass.createSpace(item)) : this.gameFieldCont.insertAdjacentHTML('beforeEnd',this.gameSquareClass.createSquare(item));
        })
    }

    squareSwap(squareFrom, squareTo) {
        [squareFrom.style.order, squareTo.style.order] = [squareTo.style.order, squareFrom.style.order]
    }

    clearField() {
        while(this.gameFieldCont.firstChild) {
            this.gameFieldCont.firstChild.remove();
        }
   ...