JSFiddle - React, Tailwind, and code Playground

HTML

<BR>
<table>
    <thead><tr><th>Buck</th><th>Arabic</th><th>Bare</th><th>Arabic(no tashkeel)</th></th></thead>
    <tr>
        <td><span id=buck style=""></span></td>
        <td><span id=arr style="font-size: 3em;"></span></td>
        <td><span id=bare style=""></span></td>
        <td><span id=arrbare style="font-size: 2.2em;"></span></td>
    </tr>
    <tr>
        <td><span id=buck2 style=""></span></td>
        <td><span id=arr2 style="font-size: 3em;"></span></td>
        <td><span id=bare2 style=""></span></td>
        <td><span id=arrbare2 style="font-size: 2.2em;"></span></td>
    </tr>
    <tr>
        <td><span id=buck3 style="">
            <span>
    <span class=POS-RSLT>fa</span><span class=POS-FUT>sa</span><span class=POS-V>yakofiy</span><span class=POS-PRON>ka</span><span class=POS-PRON>humu</span> 
</span>

            </span></td>
        <td><span id=arr3 style="font-size: 3em;"></span></td>
        <td><span id=bare3 style=""></span></td>
        <td><span id=arrbare3 style="font-size: 2.2em;"></span></td>
    </tr>
</table>

<BR>

        
        
        <BR>VERIFY (Corpus image):<BR/>
&nbsp;&nbsp;&nbsp;&nbsp;<img src=http://corpus.quran.com/wordimage?id=2449></img>
        <BR>
<a href=http://corpus.quran.com/wordmorphology.jsp?location=(2:137:15)>corpus link</a>

        
        <BR/><BR/>
        How easy it is to convert from Buck to Arabic:<BR/>
<span class=quranText id=placeholder style='font-size: 2em;'></span>

CSS

.segGray { 
    color: rgb(87, 87, 87);
}

.POS-N, .segSky {
    color: rgb(84, 141, 212);
}

.POS-PN, .segBlue {
    color: rgb(37, 126, 156);
}

.POS-ADJ, .segPurple {
    color: rgb(129, 38, 192);
}

.POS-DEM, .segBrown {
    color: rgb(191, 159, 62);
}

.POS-PRON, .segMetal {
    color: rgb(92, 112, 133);
}

.POS-REL, .POS-SUB, .POS-INT, .segGold {
    color: rgb(129, 116, 24);
}

.POS-V, .segSeagreen {
    color: rgb(50, 189, 47);
}

.segGreen {
    color: rgb(29, 105, 20);
}

.POS-PRO, .POS-NEG, .segRed {
    color: rgb(244, 64, 11);
}

.POS-P, .segRust {
    color: rgb(173, 35, 35);
}

.POS-IMPN, .POS-EQ, .POS-ACC, .POS-RES, .POS-SUP, .POS-AMD, .POS-ANS, .POS-AVR, .POS-EXP, .POS-EXH, .POS-EXL, .POS-FUT, .POS-INC, .POS-RET, .POS-SUR, .segPink {
    color: rgb(168, 1, 123);
}

.POS-INTG, .segRose {
    color: rgb(253, 81, 98);
}

.POS-REM, .POS-CONJ, .segNavy {
    color: rgb(19, 1, 184);
}

.POS-T, .POS-LOC, .POS-INL, .POS-COND, .segOrange {
    color: rgb(227, 112, 16);
}

.segSilver {
    color: rgb(180, 180, 180);
}

.quranText{
    word-spacing: 6px;
    //text-align: justify;
    line-height: 50px;
    //vertical-align: middle;
}

.quranText.top.first{
    word-spacing: 0px;
} //For word2word dont use word-spacing.

span.r1, span.r2, span.r3{
    //font-size: 1.5em !important;
    font-weight:bold !important;
}
span.r1 {
    color: red;
}
span.r2 {
    color: green;
}
span.r3 {
    color: blue;
}

th{ font-size: 1.3em; font-weight: bold; font-color: green; }
td, th { border: 1px #ccc solid; }

JavaScript

var init = function(){
    var arabic = '', buck = '', bare = '';
    buck = getSomeText(); arabic = EnToAr(buck);
    $('#placeholder').html( arabic +'<br>Buck<br>'+ escape(buck) );

    buck = 'bismo';arabic = EnToAr( buck ); bare=BuckToBare(buck);
    $('#buck').html( buck );  $('#arr').html( arabic );
    $('#bare').html( bare );  $('#arrbare').html( EnToAr(bare) );
    
    buck = 'fasayakofiykahumu'; arabic = EnToAr( buck );
    bare=BuckToBare(buck);
    $('#buck2').html( buck );  $('#arr2').html( arabic );
    $('#bare2').html( bare );  $('#arrbare2').html( EnToAr(bare) );    
    
    var parts = ['fa', 'sa', 'yakofiy', 'ka', 'humu'], arabicparts = [];
    var grammarparts = ['POS-RSLT', 'POS-FUT', 'POS-V', 'POS-PRON', 'POS-PRON'];
    $.each(parts, function(i, val){
          arabicparts[i] = EnToAr( val );
        arabicparts[i] = '<span class=' + grammarparts[i] + '>&zwj;'+arabicparts[i] + (i!=4 ? '&zwj;' : '') + '</span>';
           });
    buck = parts.join(''); bare = BuckToBare( buck );
    arabic = arabicparts.join('');

    $('#buck4').html( buck );  $('#arr3').html( arabic );
    $('#bare3').html( bare );  $('#arrbare3').html( EnToAr(bare) );

}

    
    
    
    var getSomeText = function(){
         return 'bisomi {ll~ahi {lr~aHoma`ni {lr~aHiymi\n\
             {loHamodu lil~ahi rab~i {loEa`lamiyna\n\
                 {lr~aHoma`ni {lr~aHiymi\n\
ma`liki yawomi {ld~iyni\n\
<iy~aAka naEobudu wa<iy~aAka nasotaEiynu\n\
{hodinaA {lS~ira`Ta {lomusotaqiyma\n\
Sira`Ta {l~a*iyna >anoEamota Ealayohimo gayori {lomagoDuwbi Ealayohimo walaA {lD~aA^l~iyna\n\
';
    }  
    


var BuckToBare = function(str){ if(!str) return;
    str = str.replace(/[{`><]/g, 'A').replace(/[\&]/g, 'w').replace(/[}]/g, 'y').replace( /[\FNK#aeiou~\^]/g, '');
    return str;
}


var EnToAr = function(word){
    if(!word) return null;
    initializeMapper();
    var ar = '', l, letter, found=false;
    try{
        var wordArr = word.split(''); //split into letters.    //lookup...