JSFiddle - React, Tailwind, and code Playground

by elcrimer

HTML

<script>
    function check1(){
    englishanswer.innerHTML = englishWord.value.replace(/t/,'<span style="color:red">T</span>');
    }
    function check2(){
    arabicanswer.innerHTML = 
        arabicWord.value.replace(/\u0647/,'<span style="color:red">'+
        unescape("%u0629")+'</span>')+
        '<br>'+arabicWord.value.replace(/\u0647/,unescape('%u0629'));
    }
</script>

<fieldset>
    <legend>English:</legend>
<input id='englishWord' value='test'/>
<input type='submit' value='Check' onclick='check1()'/>
<p id='englishanswer'></p>
</fieldset>

<fieldset style="direction:rtl">
    <legend>عربي</legend>
<input id='arabicWord' value='بطله'/>
<input type='submit' value='Check' onclick='check2()'/>
<p id='arabicanswer'></p>
</fieldset>

CSS

fieldset{
    border: 2px groove threedface;
    border-image: initial;
    width:75%;
}
input{
    padding:5px;
    margin:5px;
    font-size:1.25em;
}
p{
    padding:5px;
    font-size:2em;
}