Identity Provider

Service providing authentication identity.

html

<div class="idp" data-provider="google" style="border-radius:10px;">
  <span class="idp__mark" style="background:#BFD9F2;">
    <span class="idp__mark-label idp__mark-label--google">G</span>
    <span class="idp__mark-label idp__mark-label--microsoft">M</span>
    <span class="idp__mark-label idp__mark-label--github">H</span>
    <span class="idp__mark-label idp__mark-label--saml">S</span>
  </span>
  <span class="idp__body">
    <span class="idp__name idp__name--google">Google Workspace</span>
    <span class="idp__name idp__name--microsoft">Microsoft Entra ID</span>
    <span class="idp__name idp__name--github">GitHub</span>
    <span class="idp__name idp__name--saml">SAML provider</span>
    <span class="idp__status">Not connected</span>
  </span>
  <button type="button" class="idp__action" style="border-color:#BFD9F2;">Connect</button>
</div>
<style>
.idp { font: 15px system-ui, sans-serif; color: #241430; background: #FAF7F2; border: 1.5px solid #24143020; padding: 14px 16px; display: flex; align-items: center; gap: 12px; max-width: 360px; }
.idp__mark { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #241430; flex: none; }
.idp__mark-label { display: none; }
.idp[data-provider="google"] .idp__mark-label--google,
.idp[data-provider="microsoft"] .idp__mark-label--microsoft,
.idp[data-provider="github"] .idp__mark-label--github,
.idp[data-provider="saml"] .idp__mark-label--saml { display: inline; }
.idp__body { flex: 1; display: flex; flex-direction: column; }
.idp__name { display: none; font-weight: 600; }
.idp[data-provider="google"] .idp__name--google,
.idp[data-provider="microsoft"] .idp__name--microsoft,
.idp[data-provider="github"] .idp__name--github,
.idp[data-provider="saml"] .idp__name--saml { display: block; }
.idp__status { font-size: 12px; color: #24143099; }
.idp__action { background: transparent; border: 1.5px solid; padding: 7px 12px; border-radius: 7px; font: 600 13px system-ui, sans-serif; cursor: pointer; color: #241430; flex: none; }
.idp__action:focus-visible { outline: 2px solid #241430; outline-offset: 2px; }
</style>

tailwind

<div class="idp-tw flex items-center gap-3 max-w-[360px] p-4 bg-[#FAF7F2] text-[#241430] font-sans border-[1.5px] border-[#24143020]" data-provider="google" style="border-radius:10px">
  <span class="flex items-center justify-center w-9 h-9 rounded-lg font-bold flex-none" style="background:#BFD9F2">
    <span class="idp-tw__mark idp-tw__mark--google">G</span>
    <span class="idp-tw__mark idp-tw__mark--microsoft">M</span>
    <span class="idp-tw__mark idp-tw__mark--github">H</span>
    <span class="idp-tw__mark idp-tw__mark--saml">S</span>
  </span>
  <span class="flex-1 flex flex-col">
    <span class="idp-tw__name idp-tw__name--google font-semibold">Google Workspace</span>
    <span class="idp-tw__name idp-tw__name--microsoft font-semibold">Microsoft Entra ID</span>
    <span class="idp-tw__name idp-tw__name--github font-semibold">GitHub</span>
    <span class="idp-tw__name idp-tw__name--saml font-semibold">SAML provider</span>
    <span class="text-xs text-[#241430]/60">Not connected</span>
  </span>
  <button type="button" class="flex-none bg-transparent border-[1.5px] rounded-md px-3 py-1.5 text-[13px] font-semibold text-[#241430] cursor-pointer" style="border-color:#BFD9F2">Connect</button>
</div>
<style>
.idp-tw__mark, .idp-tw__name { display: none; }
.idp-tw[data-provider="google"] .idp-tw__mark--google, .idp-tw[data-provider="google"] .idp-tw__name--google,
.idp-tw[data-provider="microsoft"] .idp-tw__mark--microsoft, .idp-tw[data-provider="microsoft"] .idp-tw__name--microsoft,
.idp-tw[data-provider="github"] .idp-tw__mark--github, .idp-tw[data-provider="github"] .idp-tw__name--github,
.idp-tw[data-provider="saml"] .idp-tw__mark--saml, .idp-tw[data-provider="saml"] .idp-tw__name--saml { display: inline; }
.idp-tw__name { display: none; font-weight: 600; }
</style>

react

export function IdentityProvider({
  provider = "google",
  connected = false,
  accent = "#BFD9F2",
  radius = 10,
}) {
  const info = {
    google: { mark: "G", name: "Google Workspace" },
    microsoft: { mark: "M", name: "Microsoft Entra ID" },
    github: { mark: "H", name: "GitHub" },
    saml: { mark: "S", name: "SAML provider" },
  }[provider];
  return (
    <div style={{ display: "flex", alignItems: "center", gap: 12, maxWidth: 360, padding: "14px 16px",
      background: "#FAF7F2", color: "#241430", fontFamily: "system-ui, sans-serif", fontSize: 15,
      border: "1.5px solid #24143020", borderRadius: radius }}>
      <span style={{ width: 36, height: 36, borderRadius: 8, background: accent, display: "flex",
        alignItems: "center", justifyContent: "center", fontWeight: 700, flex: "none" }}>{info.mark}</span>
      <span style={{ flex: 1, display: "flex", flexDirection: "column" }}>
        <span style={{ fontWeight: 600 }}>{info.name}</span>
        <span style={{ fontSize: 12, color: "#24143099" }}>{connected ? "Connected" : "Not connected"}</span>
      </span>
      <button type="button" style={{ flex: "none", background: "transparent", border: `1.5px solid ${accent}`,
        borderRadius: 7, padding: "7px 12px", fontSize: 13, fontWeight: 600, color: "#241430", cursor: "pointer" }}>
        {connected ? "Disconnect" : "Connect"}
      </button>
    </div>
  );
}