JSFiddle - React, Tailwind, and code Playground

HTML

<div id='MicrosoftTranslatorWidget' class='Dark' style='display: none !important'></div><script type='text/javascript'>setTimeout(function(){{var s=document.createElement('script');s.type='text/javascript';s.charset='UTF-8';s.src=((location && location.href && location.href.indexOf('https') == 0)?'https://ssl.microsofttranslator.com':'http://www.microsofttranslator.com')+'/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=True&ui=true&settings=Manual&from=en';var p=document.getElementsByTagName('head')[0]||document.documentElement;p.insertBefore(s,p.firstChild); }},0);</script>

<div id="changeLang">
 <a  href="#" id="en">English</a>
 <a  href="#" id="ja">Japenese</a>
 <a  href="#" id="fr">French</a>
 <a  href="#" id="ru">Russia</a>
</div>
<div>This paragraph needs to be translated</div>

CSS

[translate='no'],
#WidgetFloaterPanels, #MicrosoftTranslatorWidget { display: none !important; }

JavaScript

var lang;
$('#changeLang').on("click", "a", function (e) {
    var to = $(this).attr('id');
    console.log("Translating from ", lang, " to ", to);
    Microsoft.Translator.Widget.Translate(lang, to);
    lang = to;
});