JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Bounty Question: http://stackoverflow.com/q/11516736/1195891
Reference used:  http://stackoverflow.com/a/6093315/1195891
This DEMO is altered with 6 minimal MODS where noted. Using DEMO from: http://www.dynamicdrive.com/forums/showthread.php?t=17450
Answer by arttronics.
-->

<!-- MOD 1 of 6: This paragraph note was added. -->
<p>Click <b>below the line</b> to activate, then start typing.</p>

<!-- MOD 2 of 6: This line was created. -->
<hr size=3 />

<div id="terminal" onclick="$('setter').focus();">
  <textarea type="text" id="setter" onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea>
  <div id="getter">
      <!-- MOD 3 of 6: Letter B below was replaced with ▐ character. Use ALT key + 222 to create character. -->
      <span id="writer"></span><b class="cursor" id="cursor">▐</b>
  </div>
</div>

CSS

body {
  margin: 0px;
  padding: 0px;
  height: 99%;
  background-color: white;     /* MOD 4 of 6: Set background color to match #terminal color. */
}

textarea#setter { /* explorer doesn't support [att=val] selector :( */
  left: -1000px;
  position: absolute;
}

.cursor {
  font-size: 12px;
  /*background-color: red;*/   /* MOD 5 of 6: This CSS rule is not used. */
  color: red;
  position: relative;
  opacity: 0.5;                       
}

#terminal {
  margin: 8px;
  cursor: text;
  height: 500px;
  color: white;                /* MOD 6 of 6: This CSS rule is created. Should match body. */
  /* MOD note: IE8 does not support transparent color for font. Use workaround for that. */
}

#writer {
   font-family: cursor, courier;
   font-weight: bold;
}

#getter {
        margin: 5px;
}

JavaScript

function $(elid){ /* shortcut for d.gEBI */
        return document.getElementById(elid);
      }

      var cursor; /* global variable */
      window.onload = init;

      function init(){
        cursor = $("cursor"); /* defining the global var */
        cursor.style.left = "0px"; /* setting it's position for future use */
      }

      function nl2br(txt){ /* helper, textarea return \n not <br /> */
        return txt.replace(/\n/g, "<br />");
      }

      function writeit(from, e){ /* the magic starts here, this function requires the element from which the value is extracted and an event object */
        e = e || window.event; /* window.event fix for browser compatibility */
        var w = $("writer"); /* get the place to write */
        var tw = from.value; /* get the value of the textarea */
        w.innerHTML = nl2br(tw); /* convert newlines to breaks and append the returned value to the content area */
      }

      function moveIt(count, e){ /* function to move the "fake caret" according to the keypress movement */
        e = e || window.event; /* window.event fix again */
        var keycode = e.keyCode || e.which; /* keycode fix */
//        alert(count); /* for debugging purposes */
        if(keycode == 37 && parseInt(cursor.style.left) >= (0-((count-1)*10))){ // if the key pressed by the user is left and the position of the cursor is greater than or equal to 0 - the number of words in the textarea - 1 * 10 then ...
          cursor.style.left = parseInt(cursor.style.left) - 10 + "px"; // move the cursor to the left
        } else if(keycode == 39 && (parseInt(cursor.style.left) + 10) <= 0){ // otherwise, if the key pressed by the user if right then check if the position of the cursor + 10 is smaller than or equal to zero if it is then ...
          cursor.style.left = parseInt(cursor.style.left) + 10 + "px"; // move the "fake caret" to the right
        }

      }

      function alert(txt){ // for debugging
      console.log(txt); //...