JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/2.1.0/i18next.min.js"></script>
<ul>
  <li data-i18n="red"></li>
  <li data-i18n="yellow"></li>
</ul>

JavaScript

i18next.init({
  lng: "ja",
  resources: {
    en: {
      translation: {
        red: "ringo",
        yellow: "banana"
      }
    },
    ja: {
      translation: {
        red: "こなもの",
        yellow: "ばなな"
      }
    }
  }
});

var li = document.querySelectorAll("[data-i18n]");
for(var i = 0; i < li.length; i++) {
  li[i].innerHTML = i18next.t(li[i].dataset.i18n);
}