SSO

Single Sign-On.

html

<div class="sso" style="--accent:#241430;">
  <h3 class="sso__heading">Sign in to Acme</h3>
  <p class="sso__org">Managed by Acme Corp</p>
  <button type="button" class="sso__provider sso__provider--primary" data-provider="Google">Continue with Google</button>
  <button type="button" class="sso__provider">Continue with SAML</button>
  <div class="sso__divider"><span>or</span></div>
  <label class="sso__field">
    <span class="sso__label">Work email</span>
    <input type="email" autocomplete="username" placeholder="you@company.com" />
  </label>
</div>
<style>
.sso { font: 14px/1.4 system-ui, sans-serif; color: #241430; background: #FAF7F2; width: 300px; padding: 22px; border-radius: 14px; box-sizing: border-box; border: 1px solid #24143018; }
.sso__heading { margin: 0 0 4px; font-size: 17px; }
.sso__org { margin: 0 0 18px; font-size: 12px; color: #24143099; }
.sso__provider { display: block; width: 100%; padding: 10px; border-radius: 8px; border: 1.5px solid #24143030; background: #FAF7F2; font-weight: 600; cursor: pointer; margin-bottom: 10px; font: inherit; }
.sso__provider--primary { background: var(--accent); color: #FAF7F2; border-color: var(--accent); }
.sso__divider { display: flex; align-items: center; gap: 10px; margin: 14px 0; font-size: 12px; color: #24143077; }
.sso__divider::before, .sso__divider::after { content: ""; flex: 1; height: 1px; background: #24143020; }
.sso__field { display: block; }
.sso__label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 13px; }
.sso input { width: 100%; box-sizing: border-box; padding: 9px 10px; border-radius: 8px; border: 1.5px solid #24143030; font: inherit; }
.sso__provider:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="w-[300px] p-[22px] rounded-2xl box-border border border-[#24143018] font-sans text-sm text-[#241430] bg-[#FAF7F2]">
  <h3 class="m-0 mb-1 text-[17px]">Sign in to Acme</h3>
  <p class="m-0 mb-4 text-xs text-[#241430]/60">Managed by Acme Corp</p>
  <button type="button" class="block w-full py-2.5 rounded-lg font-semibold cursor-pointer mb-2.5 text-[#FAF7F2] border-[1.5px]" style="background:#241430;border-color:#241430" data-provider="Google">Continue with Google</button>
  <button type="button" class="block w-full py-2.5 rounded-lg font-semibold cursor-pointer mb-2.5 bg-[#FAF7F2] border-[1.5px] border-[#24143030]">Continue with SAML</button>
  <div class="sso-tw-divider flex items-center gap-2.5 my-3.5 text-xs text-[#24143077]"><span>or</span></div>
  <label class="block">
    <span class="block mb-1 font-semibold text-[13px]">Work email</span>
    <input type="email" autocomplete="username" placeholder="you@company.com" class="w-full box-border px-2.5 py-2 rounded-lg border-[1.5px] border-[#24143030] font-[inherit]" />
  </label>
</div>
<style>
.sso-tw-divider::before, .sso-tw-divider::after { content: ""; flex: 1; height: 1px; background: #24143020; }
</style>

react

export function Sso({
  heading = "Sign in to Acme",
  orgName = "Acme Corp",
  primaryProvider = "Google",
  showEmailFallback = true,
  accent = "#241430",
}) {
  const btn = { display: "block", width: "100%", padding: 10, borderRadius: 8, border: "1.5px solid #24143030", background: "#FAF7F2", fontWeight: 600, cursor: "pointer", marginBottom: 10, font: "inherit" };
  return (
    <div style={{ font: "14px/1.4 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", width: 300, padding: 22, borderRadius: 14, boxSizing: "border-box", border: "1px solid #24143018" }}>
      <h3 style={{ margin: "0 0 4px", fontSize: 17 }}>{heading}</h3>
      <p style={{ margin: "0 0 18px", fontSize: 12, color: "#24143099" }}>Managed by {orgName}</p>
      <button type="button" style={{ ...btn, background: accent, color: "#FAF7F2", borderColor: accent }}>Continue with {primaryProvider}</button>
      <button type="button" style={btn}>Continue with SAML</button>
      {showEmailFallback && (
        <>
          <div style={{ display: "flex", alignItems: "center", gap: 10, margin: "14px 0", fontSize: 12, color: "#24143077" }}>
            <span style={{ flex: 1, height: 1, background: "#24143020" }} /><span>or</span><span style={{ flex: 1, height: 1, background: "#24143020" }} />
          </div>
          <label style={{ display: "block" }}>
            <span style={{ display: "block", marginBottom: 5, fontWeight: 600, fontSize: 13 }}>Work email</span>
            <input type="email" autoComplete="username" placeholder="you@company.com" style={{ width: "100%", boxSizing: "border-box", padding: "9px 10px", borderRadius: 8, border: "1.5px solid #24143030", font: "inherit" }} />
          </label>
        </>
      )}
    </div>
  );
}