JSFiddle - React, Tailwind, and code Playground

HTML

<div id="formula">
  Formula: <br>
  t<sub>n</sub> = <span id="formulat0">t<sub>0</sub></span> + <span id="formulad">d</span>*<span id='formulan'>n</span> <br>
  <br>
  t<sub>0</sub> = <span id="updatet0"></span>
  <input type="range" min="-50" max="50" value="0" id="t0" class="slider1" onchange="updateT0Input(this.value);">
  <p>Value: <span id="demo1"></span></p>
  <br>
  d = <span id="updated"></span>
  <input type="range" min="-50" max="50" value="0" id="d" class="slider2" onchange="updateDInput(this.value);">
  <p>Value: <span id="demo2"></span></p>
  <br>
  n = <span id="updaten"></span>
  <input type="range" min="1" max="20" value="10" id="tn" class="slider3" onchange="updateNInput(this.value);">
  <p>Value: <span id="demo3"></span></p>
  <br>
  <button id="buildButton" style="display:''" type="button" class="btn btn-warning"
          onclick="genTn()">Generate</button>
</div>

<br>

<div class="container">
  <div class="row" id="boxArea">
  </div>
</div>

CSS

.center {
    text-align: center;
}

#equation {
    background-color: lightgreen;
    text-align: center;
    border-radius: 10%;
}

body {
    background-color: lightblue;
}

#formula {
    background-color: lightgreen;
}

.boxed {
    border: 1px solid gray;
    margin-top: 10px;
    background-color: beige;
}

.tn {
    font-size: 3em;
}

JavaScript

var t0, difference, boxedNums, numOfTerms, redCircle, redTriangle, redRectangle, blueCircle, blueTriangle, blueRectangle;

function genTn() {
    reset();
    t0 = document.getElementById("t0").value;
    difference = document.getElementById("d").value;
    numOfTerms = document.getElementById("tn").value;
    var tn;
    document.getElementById('buildButton').style.display = 'none';
    for (n = 0; n < numOfTerms; n++) {
        tn = t0 * 1 + difference * n;
        setTimeout(buildNextOne, 3000 * n, n, tn);
    }
    setTimeout(showButton, 3000 * numOfTerms);
    document.getElementById("formulat0").innerHTML = t0;
    document.getElementById("formulad").innerHTML = difference;
    document.getElementById("formulan").innerHTML = numOfTerms;
}

function buildNextOne(n, tn) {
    var insert = '<div class="col-sm-4 col-md-2 boxed center">'
    insert += 't<sub>' + n + '</sub><br>'
    insert += '<span class="tn">' + tn + '</span><br>'
    insert += getPicsRepresentOfNumber(tn);
    insert += '</div>'
    document.getElementById("boxArea").innerHTML += insert;

    var msg = new SpeechSynthesisUtterance(tn);
    window.speechSynthesis.speak(msg);
}

function showButton() {
    document.getElementById('buildButton').style.display = '';
}

function reset() {
    document.getElementById("boxArea").innerHTML = "";
}

function getPicsRepresentOfNumber(number) {
    var totalHund = 0,
        totalTens = 0,
        totalOnes = 0,
        returnHtml = '';

    totalHund = Math.abs(parseInt(number / 100));
    var diffAfterRemovingHund = number % 100;
    totalTens = Math.abs(parseInt(diffAfterRemovingHund / 10));
    totalOnes = Math.abs(parseInt(diffAfterRemovingHund % 10));

    for (var i = 0; i < totalHund; i++) {
        returnHtml += number < 0 ? "<img src='imgs/negativeHundred.png'>&nbsp" : "<img src='imgs/hundred.png'>&nbsp";
        if (i == 4) {
            returnHtml += "&nbsp"
        }
    }
    returnHtml += "<br>";
    for (var i = 0; i < totalTens; i++) {
...