JSFiddle - React, Tailwind, and code Playground

by sewatech

HTML

<body onload="init()">
    <div>
        <select id="language" onChange="languageChanged()">
            <option value="en">English</option>
            <option value="fr">Français</option>
            <option value="de">Deutch</option>
        </select>
        <select id="region" onChange="regionChanged()">
            <option value="">-</option>
        </select>
    </div>

    <table>
        <tr>
            <td>
                <span>ISO</span>
            </td>
            <td>
                <span id="iso"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Short</span>
            </td>
            <td>
                <span id="short"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Medium</span>
            </td>
            <td>
                <span id="medium"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Long</span>
            </td>
            <td>
                <span id="long"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Number</span>
            </td>
            <td>
                <span id="number"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Currency</span>
            </td>
            <td>
                <span id="currency"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Scientific</span>
            </td>
            <td>
                <span id="scientific"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>List</span>
            </td>
            <td>
                <span id="list"></span>
            </td>
        </tr>
        <tr>
            <td>
                <span>Plurals</span>
            </td>
            <td>
                <span id="plurals"></span>
            </td>
        </tr>
    </table>
</body>

CSS

body {
  font-family: Helvetica, Arial, sans-serif !important;
  color: #333;
}

select {
  font-size: 1.2em;
  margin-bottom: 1em;
  padding: 0.2em 1em 0.2em 0.2em;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgeD0iMTJweCIgeT0iMHB4IiB3aWR0aD0iMjRweCIgaGVpZ2h0PSIzcHgiIHZpZXdCb3g9IjAgMCA2IDMiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDYgMyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+PHBvbHlnb24gcG9pbnRzPSI1Ljk5MiwwIDIuOTkyLDMgLTAuMDA4LDAgIi8+PC9zdmc+");
  background-position: 100% center;
  background-repeat: no-repeat;
  border: solid 1px #cccccc;
  appearance: none !important;
  color: #333;
}

button {
  font-size: 1em;
  margin-top: 0.8em; 
  padding: 0.5em 1em;
  border: solid 0 #007095;
  cursor: pointer;
  background-color: #008CBA;
  color: #FFFFFF;
}
button:hover {
  background-color: #007095;
}

table {
 border-collapse: collapse;
}
table td {
 border: solid 1px #ccc;
 padding: 0.2em 2em 0.2em 0.2em;
}
table tr:nth-of-type(2n) {
  background-color: #F9F9F9;
}

JavaScript

let defaultLocale = navigator.language;
let supportedLocales = ["en", "af", "ar-dz", "ar-kw", "ar-ly", "ar-ma", "ar-sa", "ar-tn", "ar", "az", "be", "bg", "bm", "bn-bd", "bn", "bo", "br", "bs", "ca", "cs", "cv", "cy", "da", "de-at", "de-ch", "de", "dv", "el", "en-au", "en-ca", "en-gb", "en-ie", "en-il", "en-in", "en-nz", "en-sg", "eo", "es-do", "es-mx", "es-us", "es", "et", "eu", "fa", "fi", "fil", "fo", "fr-ca", "fr-ch", "fr", "fy", "ga", "gd", "gl", "gom-deva", "gom-latn", "gu", "he", "hi", "hr", "hu", "hy-am", "id", "is", "it-ch", "it", "ja", "jv", "ka", "kk", "km", "kn", "ko", "ku", "ky", "lb", "lo", "lt", "lv", "me", "mi", "mk", "ml", "mn", "mr", "ms-my", "ms", "mt", "my", "nb", "ne", "nl-be", "nl", "nn", "oc-lnc", "pa-in", "pl", "pt-br", "pt", "ro", "ru", "sd", "se", "si", "sk", "sl", "sq", "sr-cyrl", "sr", "ss", "sv", "sw", "ta", "te", "tet", "tg", "th", "tk", "tl-ph", "tlh", "tr", "tzl", "tzm-latn", "tzm", "ug-cn", "uk", "ur", "uz-latn", "uz", "vi", "x-pseudo", "yo", "zh-cn", "zh-hk", "zh-mo", "zh-tw"];

function init() {
		//defineEnUsLanguage()
    languageChanged();
}

function languageChanged() {
    const languageSelect = document.getElementById('language')

    const regionSelect = document.getElementById('region')
    regionSelect.innerText = null;
    supportedLocales
        .filter(locale => locale.substring(0, 2) === languageSelect.value)
        .sort()
        .forEach(locale => {
            regionSelect[regionSelect.length] = new Option(locale, locale);
        });

    regionChanged();
}

function regionChanged() {
    const regionSelect = document.getElementById('region')
    defaultLocale = regionSelect.value;

    displayAll();
}

function displayAll() {
    displayDate('iso', null);
    displayDate('short', { year: 'numeric', month: '2-digit', day: '2-digit'});
    displayDate('medium', { dateStyle: 'medium' });
    displayDate('long', { dateStyle: 'full' });
    displayNumber('number', {});
    displayNumber('currency', { style:...