JSFiddle - React, Tailwind, and code Playground

by Eric Howe

HTML

<!-- No display:none to demonstrate the something actually happens. -->
<div lang="en" class="wrapper">
    <h1>English</h1>
    <p>Here is some English content.</p>
</div>
<div lang="fr" class="wrapper">
    <h1>Française</h1>
    <p>Voici le contenu en français.</p>
</div>
<div lang="pt" class="wrapper">
    <h1>Português</h1>
    <p>Aqui você encontra o conteúdo Português.</p>
</div>

JavaScript

var known = {
    en: true,
    fr: true,
    pt: true
};

// Figure out the language, default to English because that's
// what I speak.
var lang = (navigator.language || navigator.userLanguage || 'en').substr(0, 2);
if(!known[lang])
    lang = 'en';

// Find all <div>s with a class of "wrapper" and lang attribute equal
// to `lang` and make them visibile.
$('div.wrapper[lang=' + lang + ']').show();

// Find all <div>s with a class of "wrapper" and lang attribute not
// equal to `lang` and make them invisibile.
$('div.wrapper[lang!=' + lang + ']').hide();