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 navbar-brand">Pixel Art Maker</span>
    </nav>

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

      <form class="d-flex-inline w-50 mx-auto">
        <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</button>
        </div>
      <form class="d-flex-inline w-50 mx-auto">
        <div class="form-group w-25 mx-auto">
          <label for="color">Color</label>
          <input type="color" class="form-control colorChoice" id="color">
        </div>
      </form>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS, then local JS -->
    <script...

CSS

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

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

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

JavaScript

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


function setUpCellListeners(){
    let cells = document.querySelectorAll('.grid-square');
    cells.forEach((cell) => {
       cell.addEventListener('click', function() {
           cell.style.backgroundColor = 'red';
       });
    });
}


//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);
        }
    }
    setUpCellListeners();
}

//listens for input of rows and columns
button.addEventListener('click', function() {
    high = parseInt(document.querySelector('.column-input').value);
    wide = parseInt(document.querySelector('.row-input').value);
    if (Number.isNaN(high) || Number.isNaN(wide)) {
        createGrid();
    } else {
        createGrid(wide, high);
    }
});
//Default grid built on load
window.onload = createGrid(25, 25);