JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <section class="control">
      <h1>Blobs</h1>
      <button id="movement">Start Movement</button>
      <button id="pause">Pause Movement</button>
      <button id="reset">Reset</button>
      <div class="data">
        <h6>Size</h6>
        <p id="sizeText"></p>
        <input type="range" min="5" max="10" id="size" />
      </div>
      <div class="data">
        <h6>Timer</h6>
        <p id="timeText"></p>
        <input type="range" min="10" max="150" id="time" />
      </div>
      <div class="data">
        <h6>Magnitude</h6>
        <p id="magnitudeText"></p>
        <input type="range" min="1" max="30" id="magnitude" />
      </div>
      <div class="data">
        <h6>Jitter</h6>
        <p id="jitterText"></p>
        <input type="range" min="1" max="30" id="jitter" />
      </div>
      <div class="data">
        <h6>Container Size</h6>
        <p id="containerSizeText"></p>
        <input type="range" min="200" max="350" name="" id="containerSize" />
      </div>
      <div class="data">
        <h6>Jitter Toggle</h6>
        <input type="checkbox" name="" id="jitter-toggle" />
      </div>
    </section>

    <div id="index"></div>
    <script src="app.js"></script>
  </body>
</html>

CSS

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

body {
  color: #6ef;
  background-color: #2b3238;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0 auto;
}

h1 {
  margin: 0;
}
.control {
  position: absolute;
  top: 5px;
  width: 700px;
  height: 200px;
  resize: both;
}
.row {
  display: flex;
  justify-content: center;
}
.data {
  display: flex;
  flex-wrap: wrap;
}
.data h6 {
  margin: 0;
}
p {
  margin: 0;
}

.box {
  /* Transition both size and color maybe */
  animation: color 3s, grow 3s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: normal;
  position: relative;
  margin: 1px;
  height: 5px;
  width: 5px;
  background-color: #6ef;
  border: 0.5px solid black;
}

@keyframes grow {
}

@keyframes color {
  0% {
    background-color: #6ef;
  }
  50% {
    background-color: #66ff8c;
  }
  100% {
    background-color: #6ef;
  }
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: flex-end;
  /* border-radius: 100%; */
  border: 1px solid white;
  margin: 0 auto;
}

JavaScript

class DomObject {
  containerSize = 100;
  size = 5;
  magnitude = 10;
  time = 30;
  jitter = 5;
  jitterToggle = false;
  ballCollision = false;
  boxes = [];
  resetTimer = false;
  timer = null;
  initialize = () => {
    this.setListeners();
    this.buildGrid();
  };
  setListeners = () => {
    const size = document.getElementById("size");
    const magnitude = document.getElementById("magnitude");
    const time = document.getElementById("time");
    const sizeText = document.getElementById("sizeText");
    const magnitudeText = document.getElementById("magnitudeText");
    const timeText = document.getElementById("timeText");
    const jitter = document.getElementById("jitter");
    const jitterText = document.getElementById("jitterText");
    const jitterToggle = document.getElementById("jitter-toggle");
    const containerSize = document.getElementById("containerSize");
    const containerSizeText = document.getElementById("containerSizeText");

    containerSizeText.textContent = this.containerSize;
    timeText.textContent = this.time;
    sizeText.textContent = this.size;
    jitterText.textContent = this.jitter;
    magnitudeText.textContent = this.magnitude / 10;

    containerSize.value = this.containerSize;
    time.value = this.time;
    size.value = this.size;
    jitter.value = this.jitter;
    magnitude.value = this.magnitude;
    jitterToggle.checked = this.jitterToggle;

    containerSize.onchange = this.containerSizeChange;
    size.onchange = this.sizeChange;
    jitter.onchange = this.jitterChange;
    magnitude.onchange = this.magnitudeChange;
    time.onchange = this.timeChange;
    jitterToggle.onchange = this.jitterToggleChange;

    const button = document.getElementById("movement");
    const pauseBtn = document.getElementById("pause");
    const resetBtn = document.getElementById("reset");
    button.onclick = this.beginMovement;
    pauseBtn.onclick = this.pauseMovement;
    resetBtn.onclick = this.resetBoxes;
  };
 ...