JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainContainer" class="paraContainer">
      <div id="paraText" class="paraText"></div>

      <div id="inputTextBox" class="inputTextBox">
        <input id="inputText" class="inputText" type="text" placeholder="What do you do now?">
      </div>
</div>

CSS

.paraText {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  padding-left: 2%;
  overflow-y: scroll;
  word-wrap:break-word;
  width: 98%;
  height: 90%;
  font-size: 14px;
  line-height: 28px;
  text-align: left;
  color: #ffffff;
}

input[type="text"]{
  position: relative;
  align: left;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1%;
  height: 6%;
  width: 98%;
  font-family: ebitparty;
  font-size: 12px;
  font-style: italic;
  color: #ffffff;
  background: rgba(224, 224, 224, 0.2);
  border: solid 2px rgba(0,0,0,0.2);
  border-radius: 6px;
  box-shadow: inset 0 0 3px 1px rgba(224, 224, 224, 0.4);
  transition: box-shadow 0.3s, border 0.3s;
}

.paraContainer{
  position: relative;
  border: 15px solid transparent;
  background-color: rgba(0,0,0,0.5);
  margin-left: auto;
  margin-right: auto;
  width: 40%;
  height: 500px;
  float: center;
}

JavaScript

var textOnScreen = "";
var typeTime = 45; 
window.onLoad = (function($) {
  $("#inputText").keypress(printText);
})(jQuery);

var i = 0,
    isTag=false,
    text;

function type() {
    if (text === textOnScreen){
      setTimeout(function(){type();}, typeTime);
      return;
    }
    text = textOnScreen.slice(0, i+1);
    i++;
    document.getElementById('paraText').innerHTML = text;

    var char = text.slice(-1);
    console.log(char);
    if( char === '<' ) isTag = true;
    if( char === '>' ) isTag = false;

    if (isTag) return type();
    setTimeout(function(){type();}, typeTime);
}

function addTextToScreen(textForScreen){
  textOnScreen = textOnScreen + textForScreen;
}
type();
/*addTextToScreen("HELLO there, as you can see, this does not overflow on the x axis. However, when you type in the input box bellow, it will overflow if it is longer than the width of this box!");

addTextToScreen("<br>is it a plane?");
addTextToScreen("<br>...");
addTextToScreen("<br>no - it's <i>superman</i>");*/
addTextToScreen("eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee")

function printText(event) {
  if(event.keyCode == 13){
      printText = document.getElementById("inputText").value.toString();
      addTextToScreen("<br>" + printText.toString());
      x = document.getElementById("inputText");
      x.value = "";
  }
}