Tenant

Isolated customer/application context.

html

<div class="tnt tnt--acme">
  <div class="tnt__bar" style="background:#A8E6C1;">
    <span class="tnt__logo tnt__logo--acme">Acme Co</span>
    <span class="tnt__logo tnt__logo--globex">Globex</span>
    <span class="tnt__logo tnt__logo--initech">Initech</span>
    <span class="tnt__app">Workspace</span>
  </div>
  
  <p class="tnt__scope tnt__scope--acme">Scope: 1,204 records visible to Acme Co only</p>
  <p class="tnt__scope tnt__scope--globex">Scope: 388 records visible to Globex only</p>
  <p class="tnt__scope tnt__scope--initech">Scope: 92 records visible to Initech only</p>
  
</div>
<style>
.tnt { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; border-radius: 12px; width: 300px; box-sizing: border-box; overflow: hidden; border: 1.5px solid #24143018; }
.tnt__bar { display: flex; align-items: center; padding: 12px 14px; }
.tnt__logo { display: none; font-weight: 800; }
.tnt__app { margin-left: auto; font-size: 11px; opacity: .8; }
.tnt--acme .tnt__logo--acme, .tnt--globex .tnt__logo--globex, .tnt--initech .tnt__logo--initech { display: inline-block; }
.tnt__scope { display: none; margin: 0; padding: 12px 14px; font-size: 11px; color: #24143099; }
.tnt--acme .tnt__scope--acme, .tnt--globex .tnt__scope--globex, .tnt--initech .tnt__scope--initech { display: block; }
</style>

tailwind

<div class="tnttw tnttw--acme font-sans text-[#241430] bg-[#FAF7F2] rounded-xl w-[300px] box-border overflow-hidden border border-[#24143018]">
  <div class="flex items-center py-3 px-3.5" style="background:#A8E6C1;">
    <span class="tnttw__logo tnttw__logo--acme hidden font-extrabold">Acme Co</span>
    <span class="tnttw__logo tnttw__logo--globex hidden font-extrabold">Globex</span>
    <span class="tnttw__logo tnttw__logo--initech hidden font-extrabold">Initech</span>
    <span class="ml-auto text-[11px] opacity-80">Workspace</span>
  </div>
  
  <p class="tnttw__scope tnttw__scope--acme hidden m-0 py-3 px-3.5 text-[11px] text-[#24143099]">Scope: 1,204 records visible to Acme Co only</p>
  <p class="tnttw__scope tnttw__scope--globex hidden m-0 py-3 px-3.5 text-[11px] text-[#24143099]">Scope: 388 records visible to Globex only</p>
  <p class="tnttw__scope tnttw__scope--initech hidden m-0 py-3 px-3.5 text-[11px] text-[#24143099]">Scope: 92 records visible to Initech only</p>
  
</div>
<style>
.tnttw--acme .tnttw__logo--acme, .tnttw--globex .tnttw__logo--globex, .tnttw--initech .tnttw__logo--initech { display: inline-block; }
.tnttw--acme .tnttw__scope--acme, .tnttw--globex .tnttw__scope--globex, .tnttw--initech .tnttw__scope--initech { display: block; }
</style>

react

export function Tenant({
  tenant = "acme",
  accent = "#A8E6C1",
  showScope = true,
  appName = "Workspace",
}) {
  const names = { acme: "Acme Co", globex: "Globex", initech: "Initech" };
  const scopes = { acme: "1,204 records visible to Acme Co only", globex: "388 records visible to Globex only", initech: "92 records visible to Initech only" };
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", borderRadius: 12, width: 300, boxSizing: "border-box", overflow: "hidden", border: "1.5px solid #24143018" }}>
      <div style={{ display: "flex", alignItems: "center", padding: "12px 14px", background: accent }}>
        <span style={{ fontWeight: 800 }}>{names[tenant]}</span>
        <span style={{ marginLeft: "auto", fontSize: 11, opacity: .8 }}>{appName}</span>
      </div>
      {showScope && <p style={{ margin: 0, padding: "12px 14px", fontSize: 11, color: "#24143099" }}>Scope: {scopes[tenant]}</p>}
    </div>
  );
}