Open demo

CSS code

HTML 
<div class="so">
  <form class="so-box" action="#" method="post" onsubmit="event.preventDefault()">
    <h1>Log in to Acme</h1>
    <p class="so-sub">Choose how you want to continue.</p>
    <div class="so-social">
      <button type="button">
        <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A11 11 0 0 0 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/></svg>
        Continue with Google
      </button>
      <button type="button">
        <svg viewBox="0 0 24 24" fill="#1a1d24" aria-hidden="true" focusable="false"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4 18.3 4.3 18.3 4.3c.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.1 0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3z"/></svg>
        Continue with GitHub
      </button>
      <button type="button">
        <svg viewBox="0 0 24 24" fill="#1a1d24" aria-hidden="true" focusable="false"><path d="M16.36 12.76c.03 3.26 2.86 4.35 2.89 4.36-.02.08-.45 1.55-1.49 3.07-.9 1.31-1.83 2.62-3.3 2.65-1.44.03-1.91-.86-3.56-.86-1.65 0-2.17.83-3.54.88-1.42.05-2.5-1.42-3.4-2.72C2.1 17.47.68 12.6 2.57 9.39a5.25 5.25 0 0 1 4.44-2.7c1.39-.02 2.7.94 3.56.94.85 0 2.45-1.16 4.13-.99.7.03 2.68.29 3.94 2.13-.1.06-2.35 1.38-2.28 3.99zM13.6 3.9c.75-.91 1.26-2.18 1.12-3.44-1.08.04-2.39.72-3.17 1.63-.7.8-1.31 2.09-1.14 3.32 1.2.1 2.44-.61 3.19-1.51z"/></svg>
        Continue with Apple
      </button>
    </div>
    <div class="so-divider">OR</div>
    <label class="so-label" for="so-email">Email address</label>
    <input class="so-input" type="email" id="so-email" name="email" placeholder="[email protected]" autocomplete="username" required>
    <button class="so-go" type="submit">Continue with email</button>
    <p class="so-fine">By continuing you agree to our <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.</p>
  </form>
</div>
CSS 
/* Social-first login: three provider buttons on top, an "or" divider, then a single email field as the fallback. */
.so{--so-ink:#1a1d24;--so-muted:#6b7285;--so-line:#8b93a1;
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(180deg,#fafafa,#eef1f6);
  color:var(--so-ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.so h1,.so p{margin:0}
.so-box{width:100%;max-width:400px;background:#fff;border:1px solid #e7e9ef;border-radius:18px;padding:42px 38px;box-shadow:0 20px 45px -18px rgba(23,25,35,.18)}
.so h1{font-size:1.5rem;letter-spacing:-.02em;text-align:center}
.so-sub{text-align:center;color:#70768a;font-size:.92rem;margin:6px 0 28px!important}
.so-social{display:flex;flex-direction:column;gap:11px}
.so-social button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;border-radius:11px;border:1px solid #dcdfe8;
  background:#fff;color:var(--so-ink);font:inherit;font-size:.92rem;font-weight:600;cursor:pointer;transition:background-color .15s,border-color .15s}
.so-social button:hover{background:#f6f7fa;border-color:#c4c9d6}
.so-social svg{width:18px;height:18px;flex:none}
.so-divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--so-muted);font-size:.78rem;font-weight:600;letter-spacing:.06em}
.so-divider::before,.so-divider::after{content:"";flex:1;height:1px;background:#e7e9ef}
.so-label{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px}
.so-input{display:block;width:100%;padding:12px 14px;border:1px solid var(--so-line);border-radius:11px;font:inherit;font-size:.95rem;color:inherit;
  background:#fff;transition:border-color .15s,box-shadow .15s}
.so-input::placeholder{color:var(--so-muted)}
.so-input:focus{outline:none;border-color:var(--so-ink);box-shadow:0 0 0 3px rgba(26,29,36,.14)}
.so-go{width:100%;margin-top:14px;padding:12px;border:0;border-radius:11px;background:var(--so-ink);color:#fff;font:inherit;font-weight:700;font-size:.94rem;
  cursor:pointer;transition:opacity .15s}
.so-go:hover{opacity:.9}
.so-fine{margin-top:22px!important;text-align:center;font-size:.8rem;color:var(--so-muted);line-height:1.55}
.so-fine a{color:var(--so-ink);font-weight:600;text-decoration:none;border-radius:3px}
.so-fine a:hover{text-decoration:underline}
.so a:focus-visible,.so-social button:focus-visible,.so-go:focus-visible{outline:2px solid var(--so-ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.so-social button,.so-input,.so-go{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="so d-flex align-items-center justify-content-center">
  <form class="card w-100" action="#" method="post" onsubmit="event.preventDefault()">
    <div class="card-body">
      <h1 class="text-center mb-0">Log in to Acme</h1>
      <p class="so-sub text-center">Choose how you want to continue.</p>
      <div class="so-social d-grid">
        <button class="btn btn-provider d-flex align-items-center justify-content-center" type="button">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A11 11 0 0 0 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/></svg>
          Continue with Google
        </button>
        <button class="btn btn-provider d-flex align-items-center justify-content-center" type="button">
          <svg viewBox="0 0 24 24" fill="#1a1d24" aria-hidden="true" focusable="false"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4 18.3 4.3 18.3 4.3c.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.1 0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3z"/></svg>
          Continue with GitHub
        </button>
        <button class="btn btn-provider d-flex align-items-center justify-content-center" type="button">
          <svg viewBox="0 0 24 24" fill="#1a1d24" aria-hidden="true" focusable="false"><path d="M16.36 12.76c.03 3.26 2.86 4.35 2.89 4.36-.02.08-.45 1.55-1.49 3.07-.9 1.31-1.83 2.62-3.3 2.65-1.44.03-1.91-.86-3.56-.86-1.65 0-2.17.83-3.54.88-1.42.05-2.5-1.42-3.4-2.72C2.1 17.47.68 12.6 2.57 9.39a5.25 5.25 0 0 1 4.44-2.7c1.39-.02 2.7.94 3.56.94.85 0 2.45-1.16 4.13-.99.7.03 2.68.29 3.94 2.13-.1.06-2.35 1.38-2.28 3.99zM13.6 3.9c.75-.91 1.26-2.18 1.12-3.44-1.08.04-2.39.72-3.17 1.63-.7.8-1.31 2.09-1.14 3.32 1.2.1 2.44-.61 3.19-1.51z"/></svg>
          Continue with Apple
        </button>
      </div>
      <div class="so-divider d-flex align-items-center gap-3">OR</div>
      <label class="form-label" for="so-email">Email address</label>
      <input class="form-control" type="email" id="so-email" name="email" placeholder="[email protected]" autocomplete="username" required>
      <button class="btn btn-so w-100" type="submit">Continue with email</button>
      <p class="so-fine text-center text-body-secondary mb-0">By continuing you agree to our <a href="#">Terms</a> and <a href="#">Privacy Policy</a>.</p>
    </div>
  </form>
</div>
CSS 
/* Bootstrap .card with outline provider buttons, a .form-control email field and a dark .btn. */
.so{--so-ink:#1a1d24;--so-muted:#6b7285;
  --bs-body-color:#1a1d24;--bs-secondary-color:#6b7285;--bs-border-color:#8b93a1;
  --bs-body-font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  min-height:100vh;padding:24px;background:linear-gradient(180deg,#fafafa,#eef1f6);color:var(--bs-body-color);font-family:var(--bs-body-font-family);line-height:normal}
.so .card{--bs-card-border-color:#e7e9ef;--bs-card-border-radius:18px;--bs-card-spacer-y:42px;--bs-card-spacer-x:38px;max-width:400px;
  box-shadow:0 20px 45px -18px rgba(23,25,35,.18)}
.so h1{font-size:1.5rem;letter-spacing:-.02em;font-weight:700}
.so-sub{color:#70768a;font-size:.92rem;margin:6px 0 28px}
.so .btn-provider{--bs-btn-color:var(--so-ink);--bs-btn-bg:#fff;--bs-btn-border-color:#dcdfe8;--bs-btn-hover-color:var(--so-ink);--bs-btn-hover-bg:#f6f7fa;
  --bs-btn-hover-border-color:#c4c9d6;--bs-btn-active-color:var(--so-ink);--bs-btn-active-bg:#f6f7fa;--bs-btn-active-border-color:#c4c9d6;
  --bs-btn-padding-y:12px;--bs-btn-font-size:.92rem;--bs-btn-font-weight:600;--bs-btn-border-radius:11px;--bs-btn-line-height:1.2;--bs-btn-focus-box-shadow:none;gap:10px}
.so-social{gap:11px}
.so .btn-provider svg{width:18px;height:18px;flex:none}
.so-divider{margin:24px 0;color:var(--so-muted);font-size:.78rem;font-weight:600;letter-spacing:.06em}
.so-divider::before,.so-divider::after{content:"";flex:1;height:1px;background:#e7e9ef}
.so .form-label{font-size:.85rem;font-weight:600;margin-bottom:6px}
.so .form-control{padding:12px 14px;border-radius:11px;font-size:.95rem;line-height:1.2}
.so .form-control::placeholder{color:var(--so-muted)}
.so .form-control:focus{border-color:var(--so-ink);box-shadow:0 0 0 3px rgba(26,29,36,.14)}
.so .btn-so{--bs-btn-bg:var(--so-ink);--bs-btn-border-color:var(--so-ink);--bs-btn-color:#fff;--bs-btn-hover-bg:var(--so-ink);--bs-btn-hover-border-color:var(--so-ink);
  --bs-btn-hover-color:#fff;--bs-btn-active-bg:var(--so-ink);--bs-btn-active-border-color:var(--so-ink);--bs-btn-active-color:#fff;
  --bs-btn-padding-y:12px;--bs-btn-font-size:.94rem;--bs-btn-font-weight:700;--bs-btn-border-radius:11px;--bs-btn-line-height:1.2;--bs-btn-focus-box-shadow:none;margin-top:14px}
.so .btn-so:hover{opacity:.9}
.so-fine{margin-top:22px;font-size:.8rem;line-height:1.55}
.so-fine a{color:var(--so-ink);font-weight:600;text-decoration:none;border-radius:3px}
.so-fine a:hover{text-decoration:underline}
.so a:focus-visible,.so .btn:focus-visible{outline:2px solid var(--so-ink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.so .btn,.so .form-control{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="flex min-h-screen items-center justify-center bg-linear-180 from-[#fafafa] to-[#eef1f6] p-6 font-[-apple-system,BlinkMacSystemFont,'Segoe_UI',Roboto,Helvetica,Arial,sans-serif] leading-[normal] text-so-ink">
  <form class="w-full max-w-[400px] rounded-[18px] border border-[#e7e9ef] bg-white px-[38px] py-[42px] shadow-[0_20px_45px_-18px_rgba(23,25,35,.18)]" action="#" method="post" onsubmit="event.preventDefault()">
    <h1 class="text-center text-2xl font-bold tracking-[-.02em]">Log in to Acme</h1>
    <p class="mt-1.5 mb-7 text-center text-[.92rem] text-[#70768a]">Choose how you want to continue.</p>
    <div class="flex flex-col gap-[11px]">
      <button class="flex w-full cursor-pointer items-center justify-center gap-2.5 rounded-[11px] border border-[#dcdfe8] bg-white p-3 text-[.92rem] font-semibold transition-colors duration-150 hover:border-[#c4c9d6] hover:bg-[#f6f7fa] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-so-ink motion-reduce:transition-none" type="button">
        <svg class="size-[18px] flex-none" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 0 1-2.2 3.32v2.77h3.57c2.08-1.92 3.27-4.74 3.27-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84A11 11 0 0 0 12 23z"/><path fill="#FBBC05" d="M5.84 14.1a6.6 6.6 0 0 1 0-4.2V7.06H2.18a11 11 0 0 0 0 9.88l3.66-2.84z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15A11 11 0 0 0 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/></svg>
        Continue with Google
      </button>
      <button class="flex w-full cursor-pointer items-center justify-center gap-2.5 rounded-[11px] border border-[#dcdfe8] bg-white p-3 text-[.92rem] font-semibold transition-colors duration-150 hover:border-[#c4c9d6] hover:bg-[#f6f7fa] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-so-ink motion-reduce:transition-none" type="button">
        <svg class="size-[18px] flex-none" viewBox="0 0 24 24" fill="#1a1d24" aria-hidden="true" focusable="false"><path d="M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7.1-.7.1-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.4 1 .1-.8.4-1.3.8-1.6-2.7-.3-5.5-1.3-5.5-6 0-1.2.5-2.3 1.2-3.1-.1-.3-.5-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.3 4 18.3 4.3 18.3 4.3c.6 1.7.2 2.9.1 3.2.8.8 1.2 1.9 1.2 3.1 0 4.7-2.8 5.7-5.5 6 .4.4.8 1.1.8 2.2v3.3c0 .3.2.7.8.6A12 12 0 0 0 12 .3z"/></svg>
        Continue with GitHub
      </button>
      <button class="flex w-full cursor-pointer items-center justify-center gap-2.5 rounded-[11px] border border-[#dcdfe8] bg-white p-3 text-[.92rem] font-semibold transition-colors duration-150 hover:border-[#c4c9d6] hover:bg-[#f6f7fa] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-so-ink motion-reduce:transition-none" type="button">
        <svg class="size-[18px] flex-none" viewBox="0 0 24 24" fill="#1a1d24" aria-hidden="true" focusable="false"><path d="M16.36 12.76c.03 3.26 2.86 4.35 2.89 4.36-.02.08-.45 1.55-1.49 3.07-.9 1.31-1.83 2.62-3.3 2.65-1.44.03-1.91-.86-3.56-.86-1.65 0-2.17.83-3.54.88-1.42.05-2.5-1.42-3.4-2.72C2.1 17.47.68 12.6 2.57 9.39a5.25 5.25 0 0 1 4.44-2.7c1.39-.02 2.7.94 3.56.94.85 0 2.45-1.16 4.13-.99.7.03 2.68.29 3.94 2.13-.1.06-2.35 1.38-2.28 3.99zM13.6 3.9c.75-.91 1.26-2.18 1.12-3.44-1.08.04-2.39.72-3.17 1.63-.7.8-1.31 2.09-1.14 3.32 1.2.1 2.44-.61 3.19-1.51z"/></svg>
        Continue with Apple
      </button>
    </div>
    <div class="my-6 flex items-center gap-3.5 text-[.78rem] font-semibold tracking-[.06em] text-so-muted before:h-px before:flex-1 before:bg-[#e7e9ef] after:h-px after:flex-1 after:bg-[#e7e9ef]">OR</div>
    <label class="mb-1.5 block text-[.85rem] font-semibold" for="so-email">Email address</label>
    <input class="block w-full rounded-[11px] border border-so-line bg-white px-3.5 py-3 text-[.95rem] transition-[border-color,box-shadow] duration-150 placeholder:text-so-muted focus:border-so-ink focus:shadow-[0_0_0_3px_rgba(26,29,36,.14)] focus:outline-none motion-reduce:transition-none" type="email" id="so-email" name="email" placeholder="[email protected]" autocomplete="username" required>
    <button class="mt-3.5 w-full cursor-pointer rounded-[11px] bg-so-ink p-3 text-[.94rem] font-bold text-white transition-opacity duration-150 hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-so-ink motion-reduce:transition-none" type="submit">Continue with email</button>
    <p class="mt-[22px] text-center text-[.8rem] leading-[1.55] text-so-muted">By continuing you agree to our <a class="rounded-[3px] font-semibold text-so-ink hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-so-ink" href="#">Terms</a> and <a class="rounded-[3px] font-semibold text-so-ink hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-so-ink" href="#">Privacy Policy</a>.</p>
  </form>
</div>
CSS 
@theme {
  --color-so-ink: #1a1d24;
  --color-so-muted: #6b7285;
  --color-so-line: #8b93a1;
}

About this set

A sign-in card that puts third-party accounts first. Three full-width outline buttons read Continue with Google, Continue with GitHub and Continue with Apple, each with the provider’s logo drawn as inline SVG. Below an OR divider, a single email field and a dark Continue with email button offer the fallback, and a line of small print links to the terms and privacy policy. Use it when most of your users already have one of these accounts and a password field would only slow them down; the email route can lead to a magic link or a password step. The provider buttons are type=”button” placeholders, so wire each one to your OAuth start URL. Logos are aria-hidden, so each button is announced by its text alone. The original hid the email label; it is now visible above the field, and the divider and small print were darkened to meet 4.5:1. The Bootstrap version builds the provider buttons from .btn with custom –bs-btn-* colours and uses .form-control for the email field.

What’s included

  • Google, GitHub and Apple buttons with inline SVG logos
  • Single email field as a fallback below an OR divider
  • Visible email label with autocomplete="username"
  • Divider and terms text darkened to meet WCAG AA
  • No icon font or image requests

Accessibility

Provider buttons are named by their visible text and their logos are hidden from assistive technology. The email field has a visible label. Every button and link shows a 2px dark outline on keyboard focus and the input gets a dark border and ring. Transitions switch off under prefers-reduced-motion.

Customise it

Change --so-ink, --so-muted and --so-line on .so. In Bootstrap the provider style lives in .btn-provider as --bs-btn-* variables; in Tailwind edit the --color-so-* theme colours and the border-[#dcdfe8] on the provider buttons.