Organisation

Organisational boundary.

html

<div class="org org--pro">
  <div class="org__head">
    <span class="org__logo" style="background:#D9C8F0;">Northwind Traders</span>
    <div><strong>Northwind Traders</strong><small>24 members</small></div>
  </div>
  <p class="org__feature org__feature--free">Included: shared workspace, 3 projects</p>
  <p class="org__feature org__feature--pro">Included: shared workspace, unlimited projects, roles</p>
  <p class="org__feature org__feature--enterprise">Included: everything in Pro, SSO, audit log</p>
</div>
<style>
.org { font: 13px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 18px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.org__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.org__logo { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 0; position: relative; flex-shrink: 0; }
.org__head strong { display: block; }
.org__head small { color: #24143099; font-size: 11px; }
.org__feature { display: none; margin: 0; font-size: 11px; background: #24143010; padding: 10px; border-radius: 8px; }
.org--free .org__feature--free, .org--pro .org__feature--pro, .org--enterprise .org__feature--enterprise { display: block; }
</style>

tailwind

<div class="orgtw orgtw--pro font-sans text-[#241430] bg-[#FAF7F2] p-4.5 rounded-xl w-[300px] box-border">
  <div class="flex items-center gap-2.5 mb-3">
    <span class="w-10 h-10 rounded-[10px] grid place-items-center shrink-0" style="background:#D9C8F0;"></span>
    <div><strong class="block">Northwind Traders</strong><small class="text-[#24143099] text-[11px]">24 members</small></div>
  </div>
  <p class="orgtw__feature orgtw__feature--free hidden m-0 text-[11px] bg-[#24143010] p-2.5 rounded-lg">Included: shared workspace, 3 projects</p>
  <p class="orgtw__feature orgtw__feature--pro hidden m-0 text-[11px] bg-[#24143010] p-2.5 rounded-lg">Included: shared workspace, unlimited projects, roles</p>
  <p class="orgtw__feature orgtw__feature--enterprise hidden m-0 text-[11px] bg-[#24143010] p-2.5 rounded-lg">Included: everything in Pro, SSO, audit log</p>
</div>
<style>
.orgtw--free .orgtw__feature--free, .orgtw--pro .orgtw__feature--pro, .orgtw--enterprise .orgtw__feature--enterprise { display: block; }
</style>

react

export function Organisation({
  orgName = "Northwind Traders",
  plan = "pro",
  memberCount = 24,
  accent = "#D9C8F0",
}) {
  const features = {
    free: "Included: shared workspace, 3 projects",
    pro: "Included: shared workspace, unlimited projects, roles",
    enterprise: "Included: everything in Pro, SSO, audit log",
  }[plan];
  return (
    <div style={{ font: "13px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 18, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 12 }}>
        <span style={{ width: 40, height: 40, borderRadius: 10, background: accent, flexShrink: 0, display: "block" }} />
        <div><strong style={{ display: "block" }}>{orgName}</strong><small style={{ color: "#24143099", fontSize: 11 }}>{memberCount} members</small></div>
      </div>
      <p style={{ margin: 0, fontSize: 11, background: "#24143010", padding: 10, borderRadius: 8 }}>{features}</p>
    </div>
  );
}