JSFiddle - React, Tailwind, and code Playground

HTML

<!--
Stackoverflow Question: http://stackoverflow.com/q/11516736/1195891
Goal: How to have transparent font characters while allowing the text-caret to be visible.
Solution: Use two 'textarea' boxs. One for the actual data and the other for the 'caret' position.
Answer by arttronics.
-->


<p>For example, type 123456789123456789</p>
<p>Then click inside the middle of these invisible numbers to see the caret jump to that location.</p>
<p>Finally, type the leter AAA and notice it's in between the numbers and the caret moves correctly.</p>
<p>Highlight the line any time to view it's contents.</p>
<div id="textWrapper">

    <textarea id="textarea1"></textarea>

    <textarea id="textarea2">Click here to start.</textarea>
    
</div>


<!--

To make this Demo even better, add extra jQuery to detect for backspace key and home/end keyboard keys.

-->

CSS

/* Contain the text box. */
#textWrapper{
    position: relative;
    background-color: yellow;
    overflow: hidden;
    margin-top: 20px;
    margin-left: 20px;
    width: 400px;
    height: 20px;
    border: 2px solid black;
}

/* User input */
#textarea1 {
    position:relative;
    z-index: 2;
    background-color:transparent;
    width: 400px;
    height: 18px;
    line-height:18px;
    font-family: courier;    
    font-size:22px;      /* Font is larger so browser spellchecker hightlighter is out of view. */
    color: transparent; 
    border: none;
    resize: none;
}

/* Caret */
#textarea2 {
    position: absolute;
    z-index: 1;
    background-color:transparent;
    top: 3px;                       /* See 'font-size' in textarea1 to know why caret is shifted */
    left: 0;
    width: 400px;
    height: 18px;
    line-height: 18px;
    font-family: courier;    
    font-size:22px;
    color: red;
    resize: none;
    border: none;
}

JavaScript

$(document).ready(function(){

    // The main global variable. It's used for two almost identical jQuery functions for .keyup() and .click() method.
    var caretPositionClicked;
    
    // This is just invoked one single time to place cursor inside yellow textarea to start process.
    $('#textarea1').one('click',function(){
    
        $('#textarea2').html('│');  // Use keyboard key 'Alt' with numbpad '222' to get ▐
                                    // Use keyboard key 'Alt' with numbpad '179' to get │
                                    // Google ASCII Character Codes for more character codes.
    });
    
    
    // This will invoke on every keypress.
    $('#textarea1').keyup(function(event){

       // This section is commented out and not used but provided for future experimentation.
       //
       //var pressedKey = event.keyCode;
       // 
       // For debug: View the Key Code in the browsers console.
       //console.log(pressedKey);

       // Get the number of characters that is the value.
       // Different browsers will report different length values. Google more on JavaScript length() for info.
       caretPosition = $('#textarea1').val().length;
        
        // This will check to see if there has been a clicked value set from the "next jQuery .click() function" below.
        // If a click event has been set, then the "caretPosition" value is NOT based on the length, but the location of that position clicked.
        // A value of +1 is used so the caret is to the right of the entry/edit spot.
        if(caretPositionClicked !=0){
        
           caretPosition = caretPositionClicked + 1;
           caretPositionClicked++;
        }
        
       // View the length processed in the browsers console. Note double spaces, newlines, etc are treated diff.
       // console.log (caretPosition);
       
       // This variable is set to a empty string. It will eventually hold a certain amount of blank spaces.
       var blankSpaces =...