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.
-->

<div id="textWrapper">

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

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

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(){

    // 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.
       var caretPosition = $('#textarea1').val().length;
        
       // 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 = "";
       
       // This variable is used in the 'for-loop' increment counter. 
       var blankSpacesCounter;
       
       // This JavaScript 'for-loop' will repeat itself according to the numeric value of caretPosition above.
       for(blankSpacesCounter=1;  blankSpacesCounter < caretPosition + 1; blankSpacesCounter++){
           
           // For each loop, an extra space is appended which creates a longer string of blank spaces.
           // Alternatly, use asterisk character ( * ). Note underscore character will not show due to CSS font-size.
           blankSpaces = blankSpaces + ' ';

       }       
       
      // This will...