JSFiddle - React, Tailwind, and code Playground

HTML

<div id='notice'></div>
  <div id='wrap'>
    <div id='output'></div>
    <input id='input'>
  </div>
  <div id='version'>
    <a href='https://gitlab.com/NickBusey/tckr.html' target='_blank'>tckr.html</a>
    v0.2
    - by <a href='https://nickbusey.com/' target='_blank'>Nick Busey</a>
  </div>

CSS

body {
      background-color: #0093E9;
      background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
      background-attachment: fixed;
      font-family: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
    }

    #version {
      position: fixed;
      bottom: 1em;
      right: 1em;
      font-size: .75em;
      opacity: .8;
    }

    #wrap {
      margin: 0 auto;
      width: 400px;
      height: 100%;
    }

    #input,
    .inputItem {
      background: none;
      margin-top: 2em;
      margin-bottom: 2em;
      border-top: none;
      border-right: none;
      border-left: none;
      font-size: 1.3em;
      padding: .5em;
      width: 100%
    }

    textarea {
      resize: none;
    }

    .outputItem {
      text-align: right;
      border-bottom: 1px solid #aeaeae;
    }

    .outputItem:hover {
      border-bottom: 1px transparent white;
      box-shadow: 0px 0px 15px blue;
    }

    #notice {
      position: fixed;
      left: 5px;
      top: 5px;
      color: white;
      opacity: 0;
      transition: opacity 0.3s, visibility 0.3s;
    }

    #notice.visible {
      opacity: 100;
    }

JavaScript

var inputArea = document.getElementById('input');
    var outputArea = document.getElementById('output');
    var noticeArea = document.getElementById('notice');
    var scrollBackPosition = false;
    var inputHistory = [];
    var outputHistory = [];
    var variables = {};
    var inputCount = 0;

    const copyToClipboard = str => {
      const el = document.createElement('textarea');
      el.value = str;
      el.setAttribute('readonly', '');
      el.style.position = 'absolute';
      el.style.left = '-9999px';
      document.body.appendChild(el);
      el.select();
      document.execCommand('copy');
      document.body.removeChild(el);
      noticeArea.className = 'visible'
      noticeArea.innerHTML = 'Copied to clipboard'
      setTimeout(function () { noticeArea.className = 'hidden' }, 5000);
    };

    function isNumeric(n) { return !isNaN(parseFloat(n)) && isFinite(n); }

    const redraw = function () {
      inputCount = 0
      document.getElementById('output').innerHTML = ''

      // Retrieve any existing input history
      inputHistory = localStorage.getItem("inputHistory")
      if (inputHistory) {
        inputHistory = JSON.parse(inputHistory)
      } else {
        inputHistory = []
      }

      // Render each historical item
      if (inputHistory.length > 0) {
        inputHistory.forEach(function (historyItem) {
          renderOutput(processInput(historyItem))
        })
      }
    }

    // Evaluate and format the output result
    var processInput = function (inputValue, isUserInput = false) {
      if (!inputValue) {
        return false
      }

      // Output what was input
      let inputItem = document.createElement('textarea')
      inputItem.className = 'inputItem'
      inputItem.value = inputValue
      inputItem.setAttribute('pos', inputCount)
      inputCount++
      inputItem.addEventListener('input', function (event) {
        event.target.style.height = "5px";
        event.target.style.height =...