JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="styles/style.css">

    <title>Pixel Art Maker</title>
  </head>
  <body>

    <!-- Navbar -->
    <nav class="navbar navbar-dark bg-dark">
        <span class="navbar-brand mb-0 h1 mx-auto">Pixel Art Maker</span>
    </nav>

    <!-- Buttons for saving/loading -->
    <div class="form-group w-25 mx-auto d-flex btn-group mt-3 ">
      <button type="button" class="btn btn-info save">Save</button>
      <button type="button" class="btn btn-info load">Load</button>
    </div>

    <!-- Container to put grid in -->
    <div class="container shadow p-3 mb-5 bg-white rounded mt-2 main">
      
      <div class="container canvas d-flex-inline">
        
      </div>

      <form class="d-flex-inline w-50 mx-auto mt-4">
        <div class="d-flex">
          <div class="form-group w-25 ml-auto mr-2">
            <label class="d-block text-center" for="gridRows">Rows</label>
            <input type="number" class="form-control row-input" id="gridRows">
          </div>
          <div class="form-group w-25 mr-auto ml-2">
            <label class="d-block text-center" for="gridColumns">Columns</label>
            <input type="number" class="form-control column-input" id="gridColumns">
          </div>
        </div>  
        </form>
        <div class="form-group w-25 mx-auto">
          <button type="submit" class="btn btn-primary w-100 submit">Submit</button>
        </div>
      <div class="d-flex-inline w-50 mx-auto color">
        <div class="form-group w-25 mx-auto">
          <label...

CSS

/* import pixel font for navbar */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.grid-square {
    height: 12px;
    width: 12px;
    border: 1px black solid;
    flex-shrink: 0;
}

.row {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
}

.canvas {
    max-height: inherit;
    max-width: 75%;
}

body {
    font-family: 'Press Start 2P', cursive;
}

.color-row div {
    height: 30px;
    width: 30px;
    border: 1px black solid;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 10px;
}

.color-row {
    display: flex;
    justify-content: center;
}

.palette0 {
    background-color: red;
}

.palette1 {
    background-color: orange;
}

.palette2 {
    background-color: green;
}

.palette3 {
    background-color: blue;
}

.palette4 {
    background-color: black;
}

.palette5 {
    background-color: white;
}

JavaScript

let canvas = document.querySelector('.canvas');
let button = document.querySelector('.submit');
let palette = document.querySelector('.palette');
let high;
let wide;
let color = document.querySelector('.colorChoice').value;

let MOUSEDOWN = false;     //Flag to see if mouse is down or not

//create cell listeners
function listenCells() {
    let cell = document.querySelectorAll('.grid-square');
    cell.forEach((cell) => {
        cell.addEventListener('mouseover', function() {
            if (MOUSEDOWN === true) {
                cell.style.backgroundColor = color;
            }
            cell.addEventListener('click', function() {
                    cell.style.backgroundColor = color;
            });
        });
    });
}

function listenColors() {
    let colors = document.querySelectorAll('.colors');
    colors.forEach((member) => {
        member.addEventListener('click', function() {
            color = member.style.backgroundColor;
        });
    });
}

//Check for updated color picker
function onChangeColor() {
    color = this.value;
    let newColor = document.querySelector('.palette6');
    newColor.style.backgroundColor = this.value;
}

document.querySelector('.colorChoice').addEventListener("change", onChangeColor);  //listen for change in color picker value
document.addEventListener('mousedown', () => MOUSEDOWN = true);                    //listen for mousedown
document.addEventListener('mouseup', () => MOUSEDOWN = false);                     //listen for mouseup

//function to build the grid based on user input
function createGrid(height = 25, width = 25) {
    canvas.innerHTML = '';
    for (let i = 0; i < height; i++) {
        let row = document.createElement('div');
        row.classList.add('row');
        canvas.appendChild(row);
        for (let j = 0; j < width; j++) {
            let cell = document.createElement('div');
            cell.classList.add('grid-square');
            row.appendChild(cell);
        }
    }
   ...