Locale

Combination of language and region (e.g. en-GB).

html

<div class="loc" data-num="12345.6" data-locale="en-GB">
  <p class="loc__tag" style="background:#D9C8F0;">en-GB</p>
  
  <p class="loc__part loc__part--en-us">language: <strong>en</strong> &nbsp; region: <strong>US</strong></p>
  <p class="loc__part loc__part--en-gb">language: <strong>en</strong> &nbsp; region: <strong>GB</strong></p>
  <p class="loc__part loc__part--fr-ca">language: <strong>fr</strong> &nbsp; region: <strong>CA</strong></p>
  
  <p class="loc__number">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".loc");
  if (!el) return;
  var fmt = new Intl.NumberFormat(el.dataset.locale);
  el.querySelector(".loc__number").textContent = fmt.format(Number(el.dataset.num));
})();</script>
<style>
.loc { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 280px; box-sizing: border-box; }
.loc__tag { display: inline-block; font: 700 12px ui-monospace, monospace; padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; }
.loc__part { display: none; margin: 0 0 10px; font-size: 12px; color: #24143099; }
.loc[data-locale="en-US"] .loc__part--en-us, .loc[data-locale="en-GB"] .loc__part--en-gb, .loc[data-locale="fr-CA"] .loc__part--fr-ca { display: block; }
.loc__number { margin: 0; font-size: 22px; font-weight: 800; }
</style>

tailwind

<div class="loctw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[280px] box-border" data-num="12345.6" data-locale="en-GB">
  <p class="inline-block font-bold text-xs font-mono py-1 px-2.5 rounded-md mb-3" style="background:#D9C8F0;">en-GB</p>
  
  <p class="loctw__part loctw__part--en-us hidden m-0 mb-2.5 text-xs text-[#24143099]">language: <strong>en</strong> &nbsp; region: <strong>US</strong></p>
  <p class="loctw__part loctw__part--en-gb hidden m-0 mb-2.5 text-xs text-[#24143099]">language: <strong>en</strong> &nbsp; region: <strong>GB</strong></p>
  <p class="loctw__part loctw__part--fr-ca hidden m-0 mb-2.5 text-xs text-[#24143099]">language: <strong>fr</strong> &nbsp; region: <strong>CA</strong></p>
  
  <p class="loctw__number m-0 text-2xl font-extrabold">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".loctw");
  if (!el) return;
  var fmt = new Intl.NumberFormat(el.dataset.locale);
  el.querySelector(".loctw__number").textContent = fmt.format(Number(el.dataset.num));
})();</script>
<style>
.loctw[data-locale="en-US"] .loctw__part--en-us, .loctw[data-locale="en-GB"] .loctw__part--en-gb, .loctw[data-locale="fr-CA"] .loctw__part--fr-ca { display: block; }
</style>

react

import { useMemo } from "react";

export function Locale({
  locale = "en-GB",
  sampleNumber = 12345.6,
  showBreakdown = true,
  accent = "#D9C8F0",
}) {
  const number = useMemo(() => new Intl.NumberFormat(locale).format(sampleNumber), [locale, sampleNumber]);
  const [language, region] = locale.split("-");
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 280, boxSizing: "border-box" }}>
      <p style={{ display: "inline-block", fontWeight: 700, fontSize: 12, fontFamily: "ui-monospace, monospace", padding: "4px 10px", borderRadius: 6, marginBottom: 12, background: accent }}>{locale}</p>
      {showBreakdown && <p style={{ margin: "0 0 10px", fontSize: 12, color: "#24143099" }}>language: <strong>{language}</strong> &nbsp; region: <strong>{region}</strong></p>}
      <p style={{ margin: 0, fontSize: 22, fontWeight: 800 }}>{number}</p>
    </div>
  );
}