JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>

<script
  type="module"
  src="https://unpkg.com/@freshworks/crayons@canary/dist/crayons/crayons.esm.js">
</script>
<script
  nomodule
  src="https://unpkg.com/@freshworks/crayons@canary/dist/crayons/crayons.js">
</script>
</head>

<script
  type="module">
  import { TranslationController } from "https://unpkg.com/@freshworks/crayons@canary/dist/crayons/index.esm.js";
  window.TranslationController = TranslationController;
  window.t = TranslationController.t.bind(TranslationController);
  setTimeout(() =>{
  	// to change the lang programatically 
  	TranslationController.setLang("de");
		TranslationController.setTranslations({
			de: {
				newKey: "new Key String"
			}
		})
    
    document.getElementById("langstring").textContent = t("newKey")

  }, 2000)
</script>
<body>

  <fw-datepicker locale="en"></fw-datepicker>
  
  <p id="langstring"></p>

</body>

</html>