JSFiddle - React, Tailwind, and code Playground

by William Green

HTML

<span>a</span><span>d</span><span>a</span><span>d</span><span>f</span><span>a</span><div id="caret"></div><span>s</span><span>d</span><span>f</span><span>a</span>

CSS

span {
    white-space:pre;
    display:inline-block;
    line-height:18px;
    font-size:18px;
    vertical-align:middle;
}
#caret {
    white-space:pre;
    display:inline-block;
    height:18px;
    width:1px;
    line-height:18px;
    font-size:18px;
    vertical-align:middle;
    margin-left:-.5px;
    margin-right:-.5px;
    transition:all .3s ease;
}

JavaScript

var caret = document.getElementById('caret');
var caretOn = false;
window.setInterval(function(){
	if(caretOn == false){
        caret.style.backgroundColor = '#000';
        caretOn = true;
    }
    else{
        caret.style.backgroundColor = 'transparent';
        caretOn = false;
    }
},500);