How to make a custom element that appends each character in a ?

I’m attempting to implement this functionality for a typing website so that every character that is entered will be enclosed in a span. However, I was unable to figure out how to make a custom text-editable <div> instead of a <textarea>.

Here is how the output should look.

<div className="typableCustomDiv">
    <span>H</span>
    <span>E</span>
    <span>L</span>
    <span>L</span>
    <span>O</span>
</div>

The reason why I want to enclose them in a span to imitate a <textarea> is for the following reasons:

1. Incorrect characters will have a strikethrough and be colored red.
2. Green will be used to highlight the correct characters.
3. Create a transition such that each character you type should appear gradually, with an ease of 0.25 seconds from opacity 0 to 1.
4. etc.