JSFiddle - React, Tailwind, and code Playground
HTML
<textarea>some text with wrong wrd</textarea>
CSS
.jquery-spelling-incorrect
{
color:red;
text-decoration:underline;
}
JavaScript
jQuery('textarea').hide().before('<div class="jquery-spelling-container" contenteditable="true"/>');
jQuery('.jquery-spelling-container').html(jQuery('textarea').val()).keyup(function(){
jQuery('textarea').val(jQuery(this).text()); //take the plain text, not the span
var words = jQuery(this).text().split(' ');
/*for (var i = 0; i < words.length; i++)
{
if(isMispelled(words[i])) // your function here to test for correct spelling
{
words[i] = '<span class="jquery-spelling-incorrect">' + words[i] + '</span>';
}
}*/
words[words.length-1] = '<span class="jquery-spelling-incorrect">' + words[words.length-1] + '</span>'; //demo
jQuery(this).html(words.join(' '));
});