Translation

Content rendered in another language.

html

<div class="tr tr--es">
  <p class="tr__source" lang="en">EN: Thank you for your order</p>
  <p class="tr__out tr__out--es" lang="es">ES: Gracias por tu pedido</p>
  <p class="tr__out tr__out--fr" lang="fr">FR: Merci pour votre commande</p>
  <p class="tr__out tr__out--de" lang="de">DE: Danke f&uuml;r Ihre Bestellung</p>
  <span class="tr__badge" style="background:#A8E6C1;">Human-reviewed</span>
</div>
<style>
.tr { font: 14px/1.6 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.tr__source { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #24143010; font-size: 13px; }
.tr__out { display: none; margin: 0 0 12px; padding: 10px 12px; border-radius: 8px; background: #ffffff; border: 1px solid #24143018; font-size: 13px; font-weight: 600; }
.tr--es .tr__out--es, .tr--fr .tr__out--fr, .tr--de .tr__out--de { display: block; }
.tr__badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #241430; }
</style>

tailwind

<div class="trtw trtw--es font-sans leading-7 text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border">
  <p class="m-0 mb-2.5 py-2.5 px-3 rounded-lg bg-[#24143010] text-[13px]" lang="en">EN: Thank you for your order</p>
  <p class="trtw__out trtw__out--es hidden m-0 mb-3 py-2.5 px-3 rounded-lg bg-white border border-[#24143018] text-[13px] font-semibold" lang="es">ES: Gracias por tu pedido</p>
  <p class="trtw__out trtw__out--fr hidden m-0 mb-3 py-2.5 px-3 rounded-lg bg-white border border-[#24143018] text-[13px] font-semibold" lang="fr">FR: Merci pour votre commande</p>
  <p class="trtw__out trtw__out--de hidden m-0 mb-3 py-2.5 px-3 rounded-lg bg-white border border-[#24143018] text-[13px] font-semibold" lang="de">DE: Danke f&uuml;r Ihre Bestellung</p>
  <span class="inline-block text-[10px] font-bold py-1 px-2.5 rounded-full" style="background:#A8E6C1;">Human-reviewed</span>
</div>
<style>
.trtw--es .trtw__out--es, .trtw--fr .trtw__out--fr, .trtw--de .trtw__out--de { display: block; }
</style>

react

export function Translation({
  sourceText = "Thank you for your order",
  targetLang = "es",
  reviewedByHuman = true,
  accent = "#A8E6C1",
}) {
  const outputs = { es: "ES: Gracias por tu pedido", fr: "FR: Merci pour votre commande", de: "DE: Danke f\u00FCr Ihre Bestellung" };
  return (
    <div style={{ font: "14px/1.6 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p lang="en" style={{ margin: "0 0 10px", padding: "10px 12px", borderRadius: 8, background: "#24143010", fontSize: 13 }}>EN: {sourceText}</p>
      <p lang={targetLang} style={{ margin: "0 0 12px", padding: "10px 12px", borderRadius: 8, background: "#ffffff", border: "1px solid #24143018", fontSize: 13, fontWeight: 600 }}>{outputs[targetLang]}</p>
      <span style={{ display: "inline-block", fontSize: 10, fontWeight: 700, padding: "3px 9px", borderRadius: 999, color: "#241430", background: accent }}>{reviewedByHuman ? "Human-reviewed" : "Machine translation"}</span>
    </div>
  );
}