JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/3.0.0/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/1.11.2/i18next.min.js"></script>
<script src="https://rawgit.com/cheton/i18next-text/master/dist/i18next-text.min.js"></script>
<div class="demo-group" id="loading">
    <h2 class="title">Translation for loading:</h2>
    <div class="cols en"><div class="col-1"></div><div class="col-2 loading"></div></div>
    <div class="cols de"><div class="col-1"></div><div class="col-2 loading"></div></div>
    <div class="cols es"><div class="col-1"></div><div class="col-2 loading"></div></div>
    <div class="cols fr"><div class="col-1"></div><div class="col-2 loading"></div></div>
    <div class="cols it"><div class="col-1"></div><div class="col-2 loading"></div></div>
    <div class="cols ja"><div class="col-1"></div><div class="col-2 loading"></div></div>
    <div class="cols zh-cn"><div class="col-1"></div><div class="col-2 loading"></div></div>
    <div class="cols zh-tw"><div class="col-1"></div><div class="col-2 loading"></div></div>
</div>
<div class="demo-group" id="locate-missing-translations">
    <h2 class="title">Locate missing translations:</h2>
    <div class="cols en"><div class="col-1"></div><div class="col-2"></div></div>
    <div class="cols de"><div class="col-1"></div><div class="col-2"></div></div>
    <div class="cols es"><div class="col-1"></div><div class="col-2"></div></div>
    <div class="cols fr"><div class="col-1"></div><div class="col-2"></div></div>
    <div class="cols it"><div class="col-1"></div><div class="col-2"></div></div>
    <div class="cols ja"><div class="col-1"></div><div class="col-2"></div></div>
    <div class="cols zh-cn"><div class="col-1"></div><div class="col-2"></div></div>
    <div class="cols zh-tw"><div class="col-1"></div><div class="col-2"></div></div>
</div>
<div class="demo-group" id="handlebars-i18n-helper">
    <h2 class="title">Translation with Handlebars i18n...

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}
.title {
    display: inline-block;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    white-space: nowrap;
    vertical-align: middle;
    margin-bottom: 10px;
}
.highlight-error {
    color: #e61818;
    background-color: #efefef;
    padding: 0 3px;
}
.demo-group {
    border: 1px solid #eee;
    border-top: none;
    border-left: none;
    border-right: none;
    padding: 10px;
    line-height: 28px;
}
.cols {
    text-align: left;
}
.cols > .col-1,
.cols > .col-2 {
    display: inline-block;
}
.cols > .col-1 {
    min-width: 100px;
}
.loading {
    color: #222;
    font-size: 14px;
    font-weight: normal;
    background: transparent url("https://cdn.rawgit.com/cheton/i18next-text/dev/test/fixtures/images/loading.gif") no-repeat 0 0;
    height: 18px;
    line-height: 18px;
    padding-left: 26px;
    margin: 5px auto;
    vertical-align: middle;
}

JavaScript

var resStore = {
    "en": {
        "locale": {
            "language": "English"
        },
        "resource": {
            "loading": "Loading...",
            "cd643ef3": "Loading...", // crc32
            "8524de963f07201e5c086830d370797f": "Loading...", // md5
            "b04ba49f848624bb97ab094a2631d2ad74913498": "Loading...", // sha1
            "0854d41ab62928cdcbff1006a3d5953c45de0ddb": "YouTube has more than one billion users each month."
        }
    },
    "de": {
        "locale": {
            "language": "Deutsch"
        },
        "resource": {
            "loading": "Wird geladen...",
            "b04ba49f848624bb97ab094a2631d2ad74913498": "Wird geladen..."
        }
    },
    "es": {
        "locale": {
            "language": "Español"
        },
        "resource": {
            "loading": "Cargando...",
            "b04ba49f848624bb97ab094a2631d2ad74913498": "Cargando..."
        }
    },
    "fr": {
        "locale": {
            "language": "Français"
        },
        "resource": {
            "loading": "Chargement...",
            "b04ba49f848624bb97ab094a2631d2ad74913498": "Chargement..."
        }
    },
    "it": {
        "locale": {
            "language": "Italiano"
        },
        "resource": {
            "loading": "Caricamento in corso...",
            "b04ba49f848624bb97ab094a2631d2ad74913498": "Caricamento in corso..."
        }
    },
    "ja": {
        "locale": {
            "language": "日本語"
        },
        "resource": {
            "loading": "ロード中...",
            "b04ba49f848624bb97ab094a2631d2ad74913498": "ロード中..."
        }
    },
    "zh-cn": {
        "locale": {
            "language": "中文 (简体)"
        },
        "resource": {
            "loading": "加载中...",
            "b04ba49f848624bb97ab094a2631d2ad74913498": "加载中...",
            "0854d41ab62928cdcbff1006a3d5953c45de0ddb": "YouTube每个月有超过十亿个用户。"
        }
    },
    "zh-tw": {
        "locale": {
            "language": "中文 (繁體)"
        },
 ...