JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>




<body>
  <div id="wrapper">


    <div id="welcome">
      <h1>Welcome to Henry's Colors</h1>
      <p>Let your imagination run wild!</p>
      <button class="new">Start Imagining!</button>
      <br>
    </div>


    <div id="buttons">

      <div id="resize">
        <p>How big are your colors?</p>
        <ol>
          <li>
            <button id="tiny">Tiny</button>
          </li>
          <li>
            <button id="small">Small</button>
          </li>
          <li>
            <button id="medium">Medium</button>
          </li>
          <li>
            <button id="big">Big</button>
          </li>
          <li>
            <button id="huge">HUGE</button>
          </li>
        </ol>
      </div>
      <br>

      <div id="color_selectors">
        <p>How do you want to color?</p>
        <ol>
          <li>
            <button id="black">Black</button>
          </li>
          <li>
            <button id="grey">Grey Scale</button>
          </li>
          <li>
            <button id="random">Random</button>
          </li>
          <li>
            <button id="rgb">RGB</button>
          </li>
        </ol>
      </div>
      <br>

      <div id="reset">
        <p>Do you hate your drawing?</p>
        <ol>
          <li>
            <button id="erase">Erase Grid</button>
          </li>
          <li>
            <button class="new">Create New Grid</button>
          </li>
        </ol>
      </div>

    </div>

    <div id="colorspace">

    </div>
  </div>


</body>

</html>

CSS

.activebutton {
  color: red;
}

.colorblock {
  float: left;
  outline: 2px solid blue;
}

.black {
  background-color: black;
}

body {
  position: relative;
  text-align: center;
  align-items: center;
  background-color: lightyellow;
  align-content: center;
}

#buttons {
  position: relative;
  top: 100px;
  text-align: left;
  background-color: grey;
  float: left;
}

#colorspace {
  position: relative;
  width: 700px;
  height: 700px;
  margin: auto;
  top: 10px;
  background-color: lightgrey;
}

.tinycolorblock {
  width: 10.9375px;
  height: 10.9375px;
}

.smallcolorblock {
  width: 21.875px;
  height: 21.875px;
}

.medcolorblock {
  width: 43.75px;
  height: 43.75px;
}

.bigcolorblock {
  width: 87.5px;
  height: 87.5px;
}

.hugecolorblock {
  width: 175px;
  height: 175px;
}

ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: grey;
}

li {
  float: left;
}

li button {
  display: block;
  color: white;
  padding: 2px;
  background-color: black;
}

JavaScript

$(document).ready(function() {
  $('button').hover(function() {
    $(this).toggleClass('activebutton');
  });


  var tinyH = '<div class="colorblock tinycolorblock"></div>'
  var smallH = '<div class="smallcolorblock colorblock"></div>'
  var medH = '<div class="medcolorblock colorblock"></div>'
  var bigH = '<div class="bigcolorblock colorblock"></div>'
  var hugeH = '<div class="hugecolorblock colorblock"></div>'

  $('#tiny').click(function() {
    $('.colorblock').remove();
    for (var i = 1; i <= 64 * 64; i++) {
      $('#colorspace').append(tinyH);
    };
  });
  $('#small').click(function() {
    $('.colorblock').remove();
    for (var i = 1; i <= 32 * 32; i++) {
      $('#colorspace').append(smallH);
    };
  });
  $('#medium').click(function() {
    $('.colorblock').remove();
    for (var i = 1; i <= 16 * 16; i++) {
      $('#colorspace').append(medH);
    };
  });
  $('#big').click(function() {
    $('.colorblock').remove();
    for (var i = 1; i <= 8 * 8; i++) {
      $('#colorspace').append(bigH);
    };
  });
  $('#huge').click(function() {
    $('.colorblock').remove();
    for (var i = 1; i <= 4 * 4; i++) {
      $('#colorspace').append(hugeH);
    };
  });



  //PROBLEM ZONE
  $('.colorblock').hover(function() {
    $(this).css("background", getRandomColor()),
      function() {
        $(this).css("background", "white");
      };
  });
  $('.colorblock').hover(function() {
    $(this).addClass("black");
  })
});