Two-factor setup with QR

Build a two-factor enrolment card with Tailwind CSS, max-w-xl on a soft neutral background. Above the fold: a small uppercase "Security" eyebrow, a headline, and a line naming a few authenticator apps. The pairing panel puts a square QR placeholder (a 5-column grid of small rounded squares inside a bordered tile) beside a column holding a "Can't scan it?" hint, the setup key in a monospaced pill with a Copy button, and a six-digit confirmation input with wide letter-spacing. Footer row: a muted Cancel link and a dark "Turn on" button. Below it, a hidden success panel with a green confirmation strip, a grid of one-time backup codes, and a "Copy all codes" button. Then add JavaScript that copies the setup key to the clipboard and flips the button label to "Copied" for a moment, strips non-digits from the confirmation field and keeps the "Turn on" button disabled until six digits are present, and on confirm swaps the pairing panel for the backup-code panel and wires its copy button to put every code on the clipboard as separate lines.

<div class="flex min-h-screen items-center justify-center bg-neutral-100 p-6">
  <div class="w-full max-w-xl rounded-2xl border border-neutral-200 bg-white p-8 shadow-sm">
    <p class="text-xs font-medium uppercase tracking-widest text-neutral-400">Security</p>
    <h1 class="mt-2 text-xl font-semibold text-neutral-900">Turn on two-factor authentication</h1>
    <p class="mt-1 text-sm text-neutral-500">Scan the square with Google Authenticator, 1Password, or any TOTP app.</p>

    <div id="pairing" class="mt-7">
      <div class="flex flex-col gap-6 sm:flex-row">
        <div class="grid size-40 shrink-0 grid-cols-5 gap-1 rounded-xl border border-neutral-200 p-3">
          <span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-200"></span><span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-900"></span>
          <span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-200"></span><span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-200"></span><span class="rounded-sm bg-neutral-900"></span>
          <span class="rounded-sm bg-neutral-200"></span><span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-200"></span>
          <span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-200"></span><span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-200"></span><span class="rounded-sm bg-neutral-900"></span>
          <span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-200"></span><span class="rounded-sm bg-neutral-900"></span><span class="rounded-sm bg-neutral-900"></span>
        </div>
        <div class="min-w-0 flex-1">
          <p class="text-sm font-medium text-neutral-700">Can't scan it?</p>
          <p class="mt-1 text-sm text-neutral-500">Type this setup key into your app instead.</p>
          <div class="mt-3 flex items-center gap-2 rounded-xl border border-neutral-200 bg-neutral-50 px-3 py-2">
            <code id="secret" class="flex-1 truncate font-mono text-sm tracking-wider text-neutral-900">K7QX 4M2P 9WLR 3TCB</code>
            <button id="copySecret" class="shrink-0 rounded-lg border border-neutral-200 bg-white px-2.5 py-1 text-xs font-medium text-neutral-700 transition hover:bg-neutral-50">Copy</button>
          </div>
          <label for="code" class="mt-5 block text-sm font-medium text-neutral-700">Enter the 6-digit code</label>
          <input id="code" inputmode="numeric" placeholder="000000"
            class="mt-1.5 w-full rounded-xl border border-neutral-200 px-3.5 py-2.5 text-center font-mono text-base tracking-[0.4em] outline-none focus:border-neutral-900 focus:ring-4 focus:ring-neutral-900/10" />
        </div>
      </div>
      <div class="mt-7 flex items-center justify-end gap-4 border-t border-neutral-100 pt-5">
        <a href="#" class="text-sm text-neutral-500 hover:text-neutral-900">Cancel</a>
        <button id="verify" disabled class="cursor-not-allowed rounded-xl bg-neutral-900 px-5 py-2.5 text-sm font-medium text-white opacity-40 transition hover:bg-neutral-800">Turn on</button>
      </div>
    </div>

    <div id="done" class="mt-7 hidden">
      <p class="flex items-center gap-2 rounded-xl bg-green-50 px-4 py-3 text-sm font-medium text-green-800"><span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" class="inline-block h-[1em] w-[1em] shrink-0 align-[-0.125em] transition-transform"><path d="m5 12.5 4.25 4.25L19 7"/></svg></span> Two-factor authentication is on.</p>
      <p class="mt-6 text-sm font-medium text-neutral-900">Save your backup codes</p>
      <p class="mt-1 text-sm text-neutral-500">Each code signs you in once if you lose your device. Store them somewhere safe.</p>
      <div id="codes" class="mt-3 grid grid-cols-2 gap-2 rounded-xl border border-neutral-200 bg-neutral-50 p-4 font-mono text-sm text-neutral-700 sm:grid-cols-3">
        <span>4F2K-90XA</span><span>7BD1-QM43</span><span>ZP08-5NKE</span>
        <span>T39V-1CWH</span><span>62LA-XJ7R</span><span>M4RE-08DQ</span>
      </div>
      <button id="copyCodes" class="mt-4 rounded-xl border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 transition hover:bg-neutral-50">Copy all codes</button>
    </div>
  </div>
</div>

var secret = document.getElementById("secret");
var copySecret = document.getElementById("copySecret");
var code = document.getElementById("code");
var verify = document.getElementById("verify");
var pairing = document.getElementById("pairing");
var done = document.getElementById("done");
var copyCodes = document.getElementById("copyCodes");

// One helper so both copy buttons behave the same way.
function copy(text, button, label) {
  navigator.clipboard.writeText(text).then(function () {
    var original = button.textContent;
    button.textContent = label;
    setTimeout(function () { button.textContent = original; }, 1600);
  });
}

copySecret.addEventListener("click", function () {
  copy(secret.textContent.replace(/\s/g, ""), copySecret, "Copied");
});

code.addEventListener("input", function () {
  code.value = code.value.replace(/\D/g, "").slice(0, 6);
  var ready = code.value.length === 6;
  verify.disabled = !ready;
  verify.classList.toggle("opacity-40", !ready);
  verify.classList.toggle("cursor-not-allowed", !ready);
});

verify.addEventListener("click", function () {
  // Enrolment succeeded — the recovery codes are the last thing left to do.
  pairing.classList.add("hidden");
  done.classList.remove("hidden");
});

copyCodes.addEventListener("click", function () {
  var all = [].slice.call(document.querySelectorAll("#codes span")).map(function (s) {
    return s.textContent;
  });
  copy(all.join("\n"), copyCodes, "Copied all codes");
});