monkeytype | customizable typing website with a minimalistic design | Command Line Interface library

I want to make do a typing accuracy check application. What I want to achieve is to make the words (user should type) in the placeholder or similar to the effects of placeholder while users are typing.

When user types the words in the input, the word in placeholder should disappear or fit the words in the input (user can't see it).

I have checked several other examples on stackoverflow, for example, but nothing helps me.

This the effect I want to acheive

Could anyone give me some ideas and solutions of how to solving this?

I have been struggled with this for a long time.

Thanks for any responds!

*Sorry, my english sucks. I want to something like this in this website

I've been attempting to create a react app similar to monkeytype; where letters are formatted as the user types them. I've created a word functional component that wraps tags, but I'm running into trouble now as I try and dynamically format a bunch of these word components depending on user input. One idea I have is to store these Word components in an array then use array indexing to call a method on the Word components that needs to be updated, but I've never experienced with react component objects or understand how the object methods work. (From what I observe, you can't call methods on react components?) Here's an example of what it looks like, how can I, say, at run-time allow the user to navigate to the "Current" word and style that word conditionally?

Is there any setting or package in sublime text 3 that makes the cursor move smoothly when typing like in monkeytype.com That just makes me wanna type forever.

Assume the following module and script file:

mymodule.py