JSFiddle - React, Tailwind, and code Playground

HTML

<div style='border: 1px solid black;height:20px;'>
  <span id="result"></span>
</div>

CSS

.cursor {
    border-left: solid 1px red;
    margin-right: -1px;
    display: block;
    position: relative;
    z-index: 1;
    height: 1em;
}

.blink {
    visibility: hidden;
}

JavaScript

var cursor = $('<span class="cursor"></span>');        
$('#result').append(cursor);   

//this is used to blink the cursor. Not the issue at the moment
//but I guess I just post it here 
setInterval(function(){
    cursor.toggleClass('blink');
}, 1000);