JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/[email protected]/dist/ttag.min.js"></script>
<div id='content-en'></div>
<div id='content-uk'></div>

JavaScript

// more about this example - https://c-3po.js.org/translations-without-transpile.html

// data from .po file (fetched with gettext-parser lib)
const ukLocale = {
  'headers': {
    'plural-forms': 'nplurals=3; plural=(n%10==1 && n%100!=11 ? 0 : n%10>=2 && n%10<=4 && (n%100<10 || n%100>=20) ? 1 : 2);'
  },
  'translations': {
    '': {
      'Current time is:': {
        'msgid': 'Current time is:','msgstr': ['Поточний час:']
      },
      '${ 0 } hour': {
        'msgid': '${ 0 } hour',
        'msgid_plural': '${ 0 } hours',
        'msgstr': ['${ 0 } година','${ 0 } години','${ 0 } годин']
      },
      '${ 0 } minute': {
        'msgid': '${ 0 } minute',
        'msgid_plural': '${ 0 } minutes',
        'msgstr': ['${ 0 } хвилина','${ 0 } хвилини','${ 0 } хвилин']
      },
      '${ 0 } second': {
        'msgid': '${ 0 } second',
        'msgid_plural': '${ 0 } seconds',
        'msgstr': ['${ 0 } секунда','${ 0 } секунди','${ 0 } секунд']
      }
    }
  }
}

addLocale('uk', ukLocale);

const contentEn = document.getElementById('content-en');
const contentUk = document.getElementById('content-uk');

const view = (hours, minutes, seconds) => {
    const hoursTxt = ngettext(msgid`${hours} hour`, `${hours} hours`, hours);
    const minutesTxt = ngettext(msgid`${minutes} minute`, `${minutes} minutes`, minutes);
    const secondsTxt = ngettext(msgid`${seconds} second`, `${seconds} seconds`, seconds);

    return `
    <h2>${ t`Current time is:` }</h2>
    <h3>${hoursTxt} ${minutesTxt} ${secondsTxt}</h3>
    `
};

setInterval(() => {
    const date = new Date();
    
    useLocale('en');
    contentEn.innerHTML = view(date.getHours(), date.getMinutes(),date.getSeconds());
    
    useLocale('uk');
    contentUk.innerHTML = view(date.getHours(), date.getMinutes(),date.getSeconds());
}, 1000);