Tailwind CSS Login Modal for Vanilla JS

<!-- Requires Tailwind CSS v3 (CLI/PostCSS build, or the Play CDN for prototypes) -->
<div>
  <button type="button" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg bg-[#4f46e5] hover:bg-[#433cc3] text-white shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white" data-open="open">Sign in</button>
  <div data-show="open">
    <div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/50 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="login-title">
      <div class="relative w-full max-w-md p-8 bg-white border border-slate-200 shadow-sm rounded-xl">
        <button type="button" class="absolute top-0 right-0 m-3 inline-flex items-center justify-center w-8 h-8 rounded-full text-slate-500 hover:bg-slate-900/5" aria-label="Close" data-close="open">&times;</button>
        <h2 id="login-title" class="text-2xl font-bold mb-1 text-slate-900">Welcome back</h2>
        <p class="text-sm mb-6 text-slate-500">Sign in to continue to your dashboard.</p>
        <form class="flex flex-col gap-4">
          <div>
            <label for="login-email" class="block mb-1.5 text-sm font-medium text-slate-700">Email</label>
            <input id="login-email" type="email" autocomplete="email" placeholder="you@company.com" class="block w-full px-3 py-2 text-sm rounded-lg border bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:border-[#4f46e5]" required>
          </div>
          <div>
            <div class="flex items-center justify-between">
              <label for="login-password" class="block mb-1.5 text-sm font-medium text-slate-700">Password</label>
              <a href="#" class="text-sm font-medium text-[#4f46e5] hover:underline">Forgot?</a>
            </div>
            <input id="login-password" type="password" autocomplete="current-password" placeholder="••••••••" class="block w-full px-3 py-2 text-sm rounded-lg border bg-white border-slate-300 text-slate-900 placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:border-[#4f46e5]" required>
          </div>
          <label class="flex items-center gap-2 text-sm text-slate-700">
            <input type="checkbox" class="h-4 w-4 accent-[#4f46e5]"> Remember me for 30 days
          </label>
          <button type="submit" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg bg-[#4f46e5] hover:bg-[#433cc3] text-white shadow-sm transition-colors focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white w-full">Sign in</button>
        </form>
        <div class="flex items-center gap-3 my-6">
          <span class="flex-1 border-t border-slate-200"></span>
          <span class="text-xs uppercase text-slate-500">or</span>
          <span class="flex-1 border-t border-slate-200"></span>
        </div>
        <button type="button" class="inline-flex items-center justify-center px-4 py-2.5 text-sm font-semibold rounded-lg border transition-colors border-slate-300 text-slate-700 hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-[#4f46e5] focus:ring-offset-2 focus:ring-offset-white w-full">Continue with Google</button>
        <p class="mt-6 text-center text-sm text-slate-500">No account? <a href="#" class="font-medium text-[#4f46e5] hover:underline">Create one</a></p>
      </div>
    </div>
  </div>
</div>

<script>
  (() => {
    const state = { open: true };
    const actions = {  };
    const pair = (s) => s.split(':');
    const sync = () => {
      document.querySelectorAll('[data-show]').forEach((el) => (el.hidden = !state[el.dataset.show]));
      document.querySelectorAll('[data-hide]').forEach((el) => (el.hidden = !!state[el.dataset.hide]));
      document.querySelectorAll('[data-when]').forEach((el) => { const [k, v] = pair(el.dataset.when); el.hidden = state[k] !== v; });
      document.querySelectorAll('[data-pressed]').forEach((el) => { const [k, v] = pair(el.dataset.pressed); el.setAttribute('aria-pressed', String(state[k] === v)); });
      document.querySelectorAll('[data-expanded]').forEach((el) => el.setAttribute('aria-expanded', String(!!state[el.dataset.expanded])));
    };
    document.addEventListener('click', (e) => {
      const t = e.target.closest('[data-toggle],[data-open],[data-close],[data-set],[data-call]');
      if (!t) return;
      const { toggle, open, close, set, call } = t.dataset;
      if (call) actions[call]?.(e);
      if (toggle) state[toggle] = !state[toggle];
      if (open) state[open] = true;
      if (close) state[close] = false;
      if (set) { const [k, v] = pair(set); state[k] = v; }
      sync();
    });
    sync();
  })();
</script>