JSFiddle - React, Tailwind, and code Playground

by bornasepic

HTML

<div class="main">
    <div class="heading">
      <h3>Welcome to PixelArt</h3>
    </div>
    <div class="content"></div>
  </div>
  <div class="control-section">
    <input id="widthinput" type="number" name="Width" placeholder="Width">
    <input id="heightinput"type="number" name="Height" placeholder="Height">
    <button class="runbutton" type="button">Create</button>
  </div>
  <div class="design-section">
    <div class="cBoxArea">
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
      <div class="colorbox js-box"></div>
    </div>
  </div>
  <div class="paint-option">
    <button class="p-o-button click-button" type="button" name="button">Paint on Click</button>
    <button class="p-o-button hover-button" type="button" name="button">Paint on Hover</button>
  </div>

CSS

body{
  background-color: #e3e3e3;
  margin: 0;
  font-family: sans-serif;
}
input{
  min-width: 0px;
}
.main{
  background-color: #F4F4F4;
}
.paint-option{
  width: 30%;
  margin: auto;
}

.control-section{
  width: 15.4%;
  left: 14.8%;
  height: 20%;
  top: 35%;
  background-color: white;
  position: fixed;
  padding-right: 4px;
  border-radius: 3%;
  display: grid;
  grid-template-rows: auto auto auto;
}
.design-section, .cBoxArea{
  width: 15%;
  right: 14.9%;
  height: 20%;
  top: 35%;
  background-color: white;
  position: fixed;
  padding-right: 4px;
  border-radius: 3%;
}
.runbutton{
  width: 25%;
  max-width: 90px;
  height: 35px;
  align-self: center;
  margin-left: 37.5%;
}

.main{
  position: relative;
  width: 40%;
  margin: auto;
  height: auto;
  background-color: white;
  height: 9022px;
}
.heading h3{
  margin: 0px;
  text-align: center;
  padding: 20px 0 40px 0;
  border-bottom: 2px solid black;
}
.content{
  margin: 70px 20px 0 20px;
  border: 1px solid #e3e3e3;
}
.box{
  margin: 0px;
  width: 24px;
  height: 24px;
  background-color: black;
  float: left;
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}
.cBoxArea{
  display: grid;
  grid-template-columns: auto auto auto auto auto;
  grid-template-rows: auto auto auto;
}
.colorbox{
  margin-top: 10px;
  margin-left: 2px;
  border-radius: 20px;
  max-height: 40px;
  max-width: 40px;
  background-color: red;
}
.paint-option{
  width: 15%;
  height: 10%;
  position: fixed ;
  width: 15%;
  right: 15%;
  height: 30px;
  top: 55%;
  display: grid;
  grid-template-columns: auto auto;
}
.p-o-button, .runbutton{
  background-color: white;

  color: black;
  font-weight: bold;
  border: 1px solid black;
}
.p-o-button:hover, .runbutton:hover{
  -webkit-transition: background-color 0.2s, color 0.1s;
  background-color: #373737;
  color: #f4f4f4;
}

JavaScript

function ready(fn) {
  if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading") {
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
function colorAddition() {
  colorBoxes = new Array ();
    var colorGrid = document.querySelector('.cBoxArea');
      k = 0
  colorGrid.querySelectorAll('.js-box').forEach(function (box) {
    for (var i = 0; i < colorPalate.length; i++) {
      colorBoxes.push(box);
      box.style.background = colorPalate[k];
      k++;
      return;
    }
  })
}
function grabParameters() {
  var contentBox = document.querySelector('.content');
  var widthinput = document.querySelector('#widthinput').value;
  var boxSize = 100/widthinput;
  var heightinput = document.querySelector('#heightinput').value;
  var boxamount = widthinput*heightinput;
  //resets the grid
  while (contentBox.firstChild) {
    contentBox.removeChild(contentBox.firstChild);
  }
  create();
    function create() {
      for (var i = 0; i < boxamount; i++) {
        var box = document.createElement('div');
        box.classList.add('box');
        contentBox.appendChild(box);
        paint();
      }
    }
}
var currentColor = 'white';
function colorPick() {
  document.addEventListener('click', function handleclick(cBox) {
      if (cBox.target.matches('.js-box') === true) {
      currentColor = cBox.target.style.background;
      }
    }, false);
  }
paintWithClick = true;
function paintStyleChange() {
  if (paintWithClick === false) {
    paintWithClick = true;
  }else {
    paintWithClick = false;
  }
}
function paint() {
    document.addEventListener('click', function handleclick(artSquare) {
      if (artSquare.target.matches('.box') === true && paintWithClick === true) {
        artSquare.target.style.background = currentColor;
      }
    }, false);
    document.addEventListener('mouseover', function handlemouseover(artSquare) {
      if (artSquare.target.matches('.box') === true &&...